Главная » Файлы » Скрипты+Программы » Скрипты для Ucoz |
ДЕМО Шаг-1 js: Так как в uCoz уже вшита библиотека jQuery, нам не понадобиться её устанавливать, поэтому установим основной скрипт после тега , который отвечает за плавное исчезновение первой новости контейнера. JS Code <script type="text/javascript"> $(document).ready(function(){ var first = 0; var speed = 700; var pause = 3500; function removeFirst(){ first = $('ul#center_dm_ru li:first').html(); $('ul#center_dm_ru li:first') .animate({opacity: 0}, speed) .fadeOut('slow', function() {$(this).remove();}); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; $('ul#center_dm_ru').append(last) $('ul#center_dm_ru li:last') .animate({opacity: 1}, speed) .fadeIn('slow') } interval = setInterval(removeFirst, pause); }); </script> var speed = 700; - скорость исчезновение первого сообщения var pause = 3500; - сколько должно пройти времени, перед исчезновением сообщения Шаг-2 html: Заходим в админ панель сайта => Инструменты => Информеры => Создать информер Раздел: Комментарии Модуль: Все модули Количество материалов: 10 Количество колонок: 1 и копируем в информер следующий код: HTML-Code Code <li> <?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" target="_blank"><img class="coment_avatar" src="$USER_AVATAR_URL$" /></a><?else?><img class="coment_avatar" src="http://www.center-dm.ru/site/no_avatar.jpg" alt="no" /><?endif?><a class="massage_link" href="$ENTRY_URL$" target="_blank">$MESSAGE$</a> </li> Теперь там где хотите видеть последние комментария, устанавливаем сам информер, который поместим в ячейку списков: HTML-Code Code <ul id="center_dm_ru"> $MYINF_1$ </ul> Шаг-3 CSS: CSS-Code Code #center_dm_ru { overflow:hidden; height:250px; width:250px; border:solid 1px #C8D9E5; padding: 0px 0px 0px 0px; background: #F8FCFF; } #center_dm_ru li { list-style:none; overflow:hidden; border-top: 1px solid #fff; border-bottom: 1px solid #C8D9E5; padding: 10px 5px 10px 5px; } .coment_avatar { float:right; width:25px; height:25px; background: #F3F3F3; margin-left: 5px; padding: 2px; border:1px solid #C8D9E5; } .massage_link:link, .massage_link:visited { text-decoration: none; color:#555; } .massage_link:hover { color:#999; } #center_dm_ru li a:hover img { filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50); } Как мы видим из кода, мы прописали основные атрибуты нашим спискам, хочу заметить, что вам осталось лишь подогнать под ваш сайт, ширину и высоту основной ячейки Вот в принципе и всё... Автор\Источник: http://www.center-dm.ru | |
Mне нравится
+5
| |
Просмотров: 999 | Загрузок: 0 | Рейтинг: 1.0/5 | | |
Поделись ссылкой |
Всего комментариев: 0 | |