Поиск:
  • Страница 1 из 1
  • 1
Модератор форума: Senator  
Последние движущиеся комментария для uCoz
Дата: Пятница, 01.04.2011, 22:51 | Сообщение # 1
Offline
  • Проверенный
  • 1828 Сообщения

[Table]Шаг-1 js: [/Table]
[Table]Так как в uCoz уже вшита библиотека jQuery, нам не понадобиться её устанавливать, поэтому установим основной скрипт после тега , который отвечает за плавное исчезновение первой новости контейнера.
JS [/Table]
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; - сколько должно пройти времени, перед исчезновением сообщения

[Table]Шаг-2 html: [/Table]
[Table]Заходим в админ панель сайта => Инструменты => Информеры => Создать информер Раздел: Комментарии
Модуль: Все модули
Количество материалов: 10
Количество колонок: 1
[/Table]

[Table]и копируем в информер следующий код: [/Table]

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://webo4ka.ru/Ucoz3/no_avatar_dli_kommentov.jpg" alt="no" /><?endif?><a class="massage_link" href="$ENTRY_URL$" target="_blank">$MESSAGE$</a>    
</li>

[Table]Теперь там где хотите видеть последние комментария, устанавливаем сам информер, который поместим в ячейку списков:
HTML-Code
[/Table]

Code
<ul id="center_dm_ru">    
     $MYINF_1$    
     </ul>

[Table]Шаг-3 CSS: [/Table]
[Table]CSS-Code [/Table]

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);    
}

[Table]Как мы видим из кода, мы прописали основные атрибуты нашим спискам, хочу заметить, что вам осталось лишь подогнать под ваш сайт, ширину и высоту основной ячейки

    [/Table]

    [Table]Вот в принципе и всё...[/Table]

  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2025 Сайт управляется системой uCoz.