Приветствую Вас, Гость! Регистрация RSS

Воскресенье, 24.11.2024
  
Главная » Файлы » Скрипты+Программы » Скрипты для 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
Категория: Скрипты для Ucoz | Добавил: bizon | Теги: последние, движущиеся, ucoz, Скрипты для ucoz, комментария, для
Просмотров: 1003 | Загрузок: 0 | Рейтинг: 1.0/5 | |

Новости по теме:

Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML

  • Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Гость