Красивое оформление цитат с помощью jQuery
В сегодняшнем уроке я покажу Вам способ красивого оформления цитат на Вашем сайте.
Данный плагин будет полезен тем, кому необходимо на своем сайте отобразить несколько цитат известных людей, или это могут быть отзывы покупателей. Или же данный блок можно использовать просто для отображения мудрых мыслей. В любом случае применение найти для этого плагина можно.
Данный скрипт очень прост, легок в применении и содержит всего две настройки: скорость анимации и продолжительность показа цитаты.
В шапке документа подключаем все необходимые скрипты и таблицу стилей:
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script
<script type="text/javascript" src="/jquery.quovolver.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('blockquote').quovolver();
});
</script>
В файле jquery.quovolver.js Вы можете найти настройки скорости смены цитат в самом верху. По умолчанию там установлены значения 500 и 6000. Это милисекунды - можете менять на Ваше усмотрение.
В нужном месте документа вставляем наши цитаты:
<blockquote>
<p>Ut eu consectetur nisi. Praesent facilisis diam nec sapien gravida non mattis justo imperdiet. Vestibulum nisl urna, euismod sit amet congue at, bibendum non risus.</p>
<cite>– Quote Author (Quote #1)</cite>
</blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu eros velit, non blandit ipsum. Donec pretium, nibh vitae tristique tempor, enim sem condimentum lacus, vel mattis mauris risus id justo. Nullam tincidunt, augue sit amet euismod condimentum, orci elit dignissim odio, a viverra augue enim in lectus. Ut tempor commodo venenatis. Pellentesque pretium, ipsum nec bibendum facilisis, erat justo consequat tortor, iaculis suscipit eros est quis urna. Nunc gravida ornare nibh interdum sagittis.</p>
<cite>– Quote Author (Quote #2)</cite>
</blockquote>
<blockquote>
....
</blockquote>
Их может быть сколько угодно. Скрипт сам будет их по очереди менять.
Внешний вид можете поменять, изменив несколько строчек в таблице стилей.
На сегодня все! Всем удачи!
Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.sandbox.sebnitu.com