你好,欢迎访问远方教程PC版!
广告位招租

实现网页文字无缝滚动

[日期:2013-10-24]   来源:远方教程  作者:远方教程   阅读:3440次[字体: ] 访问[旧版]
 捐赠远方教程 

  总所周知,html的marquee标签可以实现网页文字的移动。但是marquee滚动的效果不太和谐,且如果内容多会出现“断续”的情况。因此,无缝滚动很受欢迎。现将代码送上,只须替换链接即可。

<div id=marquees style="height=100px;LEFT: 60px; POSITION: absolute; TOP: 100px;">
<font style="font-family:宋体; color:white; font-size:14px;line-height=15px">
<a href="#"><img src=1.jpg></a><br>
<br>
<a href="#">远方教程——满足您的求知欲!</a><br>
<br>
<a href="#">做网络追求卓越,不懂处点击远方</a><br>
<br>
<a href="#">远方教程——站长建站之家</a><br>
<br>
<a href="#">远方网,爱在远方。</a><br>
<br>
</div>
<script language="JavaScript">

marqueesHeight=100;
stopscroll=false;

with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollup()",30);
}
document.body.onload=init;

function scrollup(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>

图片展示
 
相关评论
站长推荐