Я тут подглядел на новостном сайте BBC Russian такую фишку: плавно появляющиеся в верхней части сайта заголовки новостей. Замечу, очень плавно и естественно, без дрожи, присущей обычной бегущей строке.
Реализацию данного эффекта я увидела на сайте www.htmldrive.net.
Шаг 1. После <head> добавляем
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ (function($){ $.fn.list_ticker = function(options){ var defaults = { speed:4000, effect:'slide', run_once:false }; var options = $.extend(defaults, options); return this.each(function(){ var obj = $(this); var list = obj.children(); var count = list.length - 1; list.not(':first').hide(); var interval = setInterval(function(){ list = obj.children(); list.not(':first').hide(); var first_li = list.eq(0) var second_li = list.eq(1) if(options.effect == 'slide'){ first_li.slideUp(); second_li.slideDown(function(){ first_li.remove().appendTo(obj); }); } else if(options.effect == 'fade'){ first_li.fadeOut(function(){ obj.css('height',second_li.height()); second_li.fadeIn(); first_li.remove().appendTo(obj); }); } count--; if(count == 0 && options.run_once){ clearInterval(interval); } }, options.speed) }); }; })(jQuery); //]]> </script> <script type='text/javascript'> $(document).ready(function(){ $('#fade').list_ticker({ speed:5000, effect:'fade' }); $('#slide').list_ticker({ speed:5000, effect:'slide' }); }) </script>, где speed:5000 - это время изменения записей.
Шаг 2. В то место, где необходимо разместить список, указываем:
Для эффекта 'fade' <ul id="fade"> <li style="display: list-item;">Раз</li> <li style="display: none;">Два</li> <li style="display: none;">Три</li> <li style="display: none;">Четыре</li> <li style="display: none;">Пять</li> </ul> Для эффекта 'slide' <ul id="slide"> <li style="display: list-item;">Раз</li> <li style="display: none;">Два</li> <li style="display: none;">Три</li> <li style="display: none;">Четыре</li> <li style="display: none;">Пять</li> </ul>
Для платформы Blogger.
Автоматизировать процесс добавления свежих записей можно, используя гаджет "Blog List". Для осуществления данного эффекта пропускаем шаг 2, а в коде шага 1 меняем строку
$('#fade').list_ticker({на
$('#BlogList1_blogs').list_ticker({
30 комментариев:
Наталья, если Вам не сложно можете ли Вы подсказать, как можно сделать картинку в верху сайта, да так, чтобы на ней был виден текст (при наведении курсора).
P.S Пардон, если не здесь пишу...
1)блоки записей не равной высоты. Более верно было бы задать одинаковое значение в height, а также указать overflow: hidden.
2)slide действительно затрагивает другие элементы. Верное его использование - ниже других блоков.
Прошу прощения за много букв и невнятное объяснение, но надеюсь проблема вам будет понятна.
<script type='text/javascript'>
$(document).ready(function(){
$('#fade').list_ticker({
speed:5000,
effect:'fade'
});
$('#fade-dva').list_ticker({
speed:5000,
effect:'fade'
});
})
</script>
Тогда
<ul id="fade-dva">
<li style="display: list-item;">Первый</li>
<li style="display: none;">Второй</li>
<li style="display: none;">Третий</li>
<li style="display: none;">Четвёртый</li>
<li style="display: none;">Пятый</li>
</ul>
Самый простейший вариант изменения текста при обновлении страницы:
<script>
var rnd = Math.floor(Math.random()*3);
if(rnd == 0) {document.write('Текст 1');}
if(rnd == 1) {document.write('Текст 2');}
if(rnd == 2) {document.write('Текст 3');}
</script>
Создаём гаджет "Список", куда вносим необходимый текст в "Добавить элемент списка" с помощью кнопки "Добавить элемент".
Вместо шага 2. В коде шаблона пишем id='slide'. Итог:
<b:widget id='TextList1' locked='false' title='' type='TextList'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul id='slide'>
<b:loop values='data:items' var='item'>
<li><data:item/></li>
</b:loop>
</ul>
Все свои рекомендации сначала тестирую на пробном блоге. Попробуйте снова проделать действия комментария 15 и отписаться, я посмотрю где кроется возможная ошибка. Я когда его писала, чуяла что некоторые моменты не досказала. Например, что в "Список" нужно вписать несколько строк, а не одной линией.
-- только из-за того что все им пользуются и он очень моден!!!!
Выражение $('поисковый селектор') на пресловутом jQuery - элементарно заменяется типовым DOM вызовом document.querySelector('поисковый селектор')
** результат одинаковый
http://bug-zest.blogspot.ru/2011/09/gecko-6.html
Так-то я предпочитаю чистый CSS и её свойство animation. JS я знаю на уровне младенца, а тем более библиотеки, на подобии jQuery.
Я понимаю, что если нужно сделать один элемент, то подключать всю библиотеку не имеет смысла. И то, что благодаря всеобщей распространенности, весь скрипт плотно сидит в кэше у пользователей и не так сильно влияет на скорость загрузки страницы.
Спасибо, заработало.
А как убрать точку, которая обозначает элемент списка? Сделать просто смену фраз, к примеру?
#fade li {
display: none;
list-style-type: none;
}
Адрес блога: http://pravloza.blogspot.ru/
Виджет "Список"
#slide li {display: none;}