Сегодня мы сделаем красивый новостной блок с помощью jQuery.
Подобный новостной блок станет украшением любого сайта.
Как всегда, в самом начале необходимо между тегами <head></head> добавить следующий код:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
Далее подключаем стили в документе или же выносим их в отдельный файл:
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#listticker{
height:200px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 10px 14px 10px;;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:60px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
}
</style>
И после всего этого вставляем все новости в ненумерованый список:
<ul id="listticker">
<li>
<img src="img/1.png" />
<a href="" class="news-title">Health care reform</a>
<span class="news-text">President Obama has announced three bedrock requirements for real health care reform</span>
</li>
<li>
<img src="img/2.png" />
<a href="" class="news-title">National Geographic Animals</a>
<span class="news-text">Killer whales, Bengal tigers, crocs, more</span>
</li>
<li>
<img src="img/3.png" />
<a href="" class="news-title">Spotlight stars</a>
<span class="news-text">Marilyn Manson is not exactly a conformist. From his music — a meat-grinder...</span>
</li>
<li>
<img src="img/4.png" />
<a href="" class="news-title">Lost: the new serie is coming</a>
<span class="news-text">Watch full episodes online. The final season begins early 2010</span>
</li>
</ul>
Вот и все. Красивый новостной блок готов!
Спасибо за внимание! Удачи.