Всем привет. Выставляю вам свое детище сегодняшнее.
Задача - на главной должен быть список последних N новостей. Они должны быть в бегущей строке и между последним и первым элементом не должно быть разрывов.
Покопавшись в интернете, ничего толкового не нашел и изобрел свой велик. Надеюсь, что кому то будет полезно.
Так же надеюсь на советы по оптимизации работы кода, так как немного вешает проц. (по оптимизации внешнего вида кода не прошу  - это рабочая версия кода ).
код писался под prototype.js, оттестирован на FF, Opera, Chrome и IE
| Код |
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="prototype.js"></script>
<style>
.bl-imptnt_nav {clear: both;
float:left;width:100%; overflow: hidden;
}
.bl-imptnt_nav ul {
height:14px;overflow:hidden;
}
.bl-imptnt_nav ul li {
float:left; padding-right:10px;margin-right:6px; height:15px;overflow:hidden;
font-size:12px;
}
</style>
<script type="text/javascript">
var important_copyspeed = 1;
var currentOffset = 0;
var current_element;
document.observe("dom:loaded", function() {
if( $('marquee') ) {
initScroller('marquee');
$('marquee').observe("mouseover", function() {
important_copyspeed=0;
});
$('marquee').observe("mouseout", function() {
important_copyspeed=1;
});
}
} );
function initScroller(id) {
$(id).setStyle({ left: "0px" });
var childs = $(id).childElements();
current_element = childs[0];
var len = childs.length;
for(i=0; i<len;i++) {
$(id).appendChild(new Element('li', { 'class': childs[i].className }).update(childs[i].innerHTML));
}
var oW = 0;
$$('.imptnt_item').each(function(el) { oW += el.offsetWidth });
var actualwidth=-oW;
setTimeout('setInterval("doScroll(\''+id+'\', '+actualwidth+')",30)', 1000);
}
function doScroll(id, actualwidth) {
var cross_marquee = $(id);
cross_marquee.setStyle({ left: parseInt(cross_marquee.getStyle('left'))-important_copyspeed+"px" });
if( -parseInt(cross_marquee.getStyle('left')) == currentOffset+current_element.getWidth()+8 ) {
currentOffset += parseInt(current_element.getWidth())+8;
cross_marquee.appendChild(new Element('li', { 'class': current_element.className }).update(current_element.innerHTML));
if(current_element.previous()) {
var first = current_element.previous();
var pw = parseInt(first.getWidth())+8;
var new_left = parseInt(cross_marquee.getStyle('left'))+pw;
first.remove();
cross_marquee.setStyle({ left: new_left+"px" });
currentOffset -= pw;
}
current_element = current_element.next();
}
}
</script>
</head>
<body>
<div class="bl-imptnt_nav">
<div id="marquee-parent" style="overflow: hidden;">
<div class="content" style="overflow: hidden; position: relative;">
<ul id="marquee" style="width:8000px; position:relative;">
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">первая ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">вторая ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">третья ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">четвертая ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">пятая ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">шестая ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">седьмая ссылка</a></li>
<li class="imptnt_item bl-imptnt_nav_itm_Last"><a href="#">восьмая ссылка</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
|