注册 登录
编程论坛 ASP技术论坛

实现无缝滚动。

niuniu2009kk 发布于 2007-10-23 22:34, 688 次点击

<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="#">你在做什么</a><br>
<br>
<a href="#">我在仰望天空</a><br>
<br>
<a href="#">30度仰望是什么</a><br>
<br>
<a href="#">是我想念她的角度</a><br>
<br>
<a href="#">为什么要把头抬到30度</a><br>
<br>
<a href="#">为了不让我的眼泪掉下来</a><br>
<br>
<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>


怎么实现无缝滚动,这是我从网上找到的源码,但是我看不明白那里是实现无缝循环滚动的核心代码,那位朋友能帮我逐句解释下吗,可能工作量很大,在这里表示感谢……

4 回复
#2
永夜的极光2007-10-24 07:44
其实就是把你需要滚动的内容复制一份,放在最下面,跟着向上移动,这样就不会出现断层
#3
疯狂的探索者2007-10-24 09:00


二楼的方法不错
值得借鉴

#4
niuniu2009kk2007-10-24 10:00
得却是个好方法,但是你怎么实现刚打开页面或刷新页面他就滚动呢,二楼的朋友实现打开页面后的无缝滚动,而我要的是刚开始加载页面时没有缝隙……
不过你的方法确实不错。
#5
niuniu2009kk2007-10-24 10:42

忘了说了,通俗的说就是滚动的内容首尾相连,看不出来有缝隙……

1