<div id="marquee2" class="marqueetop">
<div>
<ul id="marquee2_1">
{dede:arclist typeid='17' orderby ='pubdate' titlelen='70' }
<li>[field:title/] <font class="fr">[field:writer/]</font></li>
{/dede:arclist}
</ul>
<ul id="marquee2_2"></ul>
</div>
</div>
<script type="text/javascript">marqueeStart(2, "up");</script>
/*css样式*/
.marqueetop{ height: 144px; width: 777px; overflow: hidden; margin: 0 auto; border:1px #ccc solid;}
#marquee2 li{ line-height:30px; border-bottom:1px #ccc dashed; padding:0 8px; color:#4A4A4A;}
//js无缝滚动代码
function marquee(i, direction){
var obj = document.getElementById("marquee" + i);
var obj1 = document.getElementById("marquee" + i + "_1");
var obj2 = document.getElementById("marquee" + i + "_2");
if (direction == "up"){
if (obj2.offsetTop - obj.scrollTop <= 0){
obj.scrollTop -= (obj1.offsetHeight + 40);
}else{
var tmp = obj.scrollTop;
obj.scrollTop++;
if (obj.scrollTop == tmp){
obj.scrollTop = 1;
}
}
}else{
if (obj2.offsetWidth - obj.scrollLeft <= 0){
obj.scrollLeft -= obj1.offsetWidth;
}else{
obj.scrollLeft++;
}
}
}
function marqueeStart(i, direction){
var obj = document.getElementById("marquee" + i);
var obj1 = document.getElementById("marquee" + i + "_1");
var obj2 = document.getElementById("marquee" + i + "_2");
obj2.innerHTML = obj1.innerHTML;
var marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 40);
obj. = function(){
window.clearInterval(marqueeVar);
}
obj. = function(){
marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 40);
}
}
转载于:https://blog.51cto.com/henhao/1950419