本文探讨了如何通过调整代码实现向左、向右及向上滚动的动画效果，并解决了滚动停止的问题。通过改变元素宽度、增加图片数量以及利用定时器与鼠标事件，实现了流畅的滚动体验。同时，提供了解决方案来防止滚动停止于特定位置。
向上滚动
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
</div>
<div id=demo2></div>
</div>
<wbr><wbr> <script><br><wbr><wbr> var speed=30<br><wbr><wbr> demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2<br><wbr><wbr> function Marquee(){<br> //当滚动至demo1与demo2交界时<br> if(demo2.offsetTop-demo.scrollTop<=0)<wbr><wbr><br> demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端<br> else{<br> demo.scrollTop++<br><wbr><wbr> }<br><wbr><wbr> }<br><wbr><wbr> var MyMar=setInterval(Marquee,speed)//设置定时器<br> //鼠标移上时清除定时器达到滚动停止的目的<br><wbr><wbr> demo.onmouseover=function() {clearInterval(MyMar)}<br> //鼠标移开时重设定时器<br><wbr><wbr> demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}<br> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
向下滚动
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
<img src="http://www.haao.cn/logo.gif">
</div>
<div id=demo2></div>
</div>
<wbr><wbr><wbr> <script><br><wbr><wbr><wbr> var speed=30<br><wbr><wbr><wbr> demo2.innerHTML=demo1.innerHTML<br><wbr><wbr><wbr> demo.scrollTop=demo.scrollHeight<br><wbr><wbr><wbr> function Marquee(){<br><wbr><wbr><wbr> if(demo1.offsetTop-demo.scrollTop>=0)<br><wbr><wbr><wbr> demo.scrollTop+=demo2.offsetHeight<br><wbr><wbr><wbr> else{<br><wbr><wbr><wbr> demo.scrollTop--<br><wbr><wbr><wbr> }<br><wbr><wbr><wbr> }<br><wbr><wbr><wbr> var MyMar=setInterval(Marquee,speed)<br><wbr><wbr><wbr> demo.onmouseover=function() {clearInterval(MyMar)}<br><wbr><wbr><wbr> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
向左滚动效果一
这里很多人提到滚动会停止，我将原来的width:670px改为width:600px，然后增加了两个<td><img src="http://www.haao.cn/logo.gif" width="88"></td>，问题得到解决！
<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<wbr><wbr><wbr><wbr><wbr> <table cellpadding="0" cellspacing="0" border="0"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <tr><td id="demo1" valign="top" align="center"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <table cellpadding="2" cellspacing="0" border="0"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <tr align="center"><br><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </tr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </table><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td id="demo2" valign="top"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </tr><br><wbr><wbr><wbr><wbr><wbr> </table><br><wbr><wbr><wbr> </div><br> <script><br> var speed=1//速度数值越大速度越慢<br> demo2.innerHTML=demo1.innerHTML<br> function Marquee(){<br> if(demo2.offsetWidth-demo.scrollLeft<=0)<br> demo.scrollLeft-=demo1.offsetWidth<br> else{<br> demo.scrollLeft++<br> }<br> }<br> var MyMar=setInterval(Marquee,speed)<br> demo.onmouseover=function() {clearInterval(MyMar)}<br> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
向左滚动效果二
<div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<wbr><wbr> <tr><br><wbr><wbr><wbr><wbr><wbr><wbr> <td valign=top bgcolor=ffffff id=marquePic1><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <table width='100%' border='0' cellspacing='0'><tr><td align=center><a href='#' target=_blank><img src="<a href="http://bbs.blueidea.com/logo.gif">http://bbs.blueidea.com/logo.gif</a>" width=120 height=80 border=0><br><br>11111111111111</a></td><td align=center><a href='#' target=_blank><img src=http://bbs.blueidea.com/logo.gif width=120 height=80 border=0><br><br>2222222222</a></td><td align=center><a href='#' target=_blank><img src=bbs.blueidea.com/logo.gif width=120 height=80 border=0><br><br>333333333</a></td><td align=center><a href='#' target=_blank><img src="bbs.blueidea.com/logo.gif" width=120 height=80 border=0><br><br>11111111111111</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>2222222222</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>333333333</a></td><td align=center><a href='#' target=_blank><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width=120 height=80 border=0><br><br>11111111111111</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>2222222222</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>333333333</a></td></tr></table><br><wbr><wbr><wbr><wbr><wbr><wbr> </td><br><wbr><wbr><wbr><wbr><wbr><wbr> <td id=marquePic2 valign=top></td><br><wbr><wbr><wbr><wbr><wbr><wbr> </tr><br><wbr><wbr><wbr><wbr><wbr> </table><br><wbr><wbr><wbr><wbr> </div><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <script type="text/javascript"><br> var speed=50<br> marquePic2.innerHTML=marquePic1.innerHTML<br> function Marquee(){<br> if(demo.scrollLeft>=marquePic1.scrollWidth){<br> demo.scrollLeft=0<br> }else{<br> demo.scrollLeft++<br> }<br> }<br> var MyMar=setInterval(Marquee,speed)<br> demo.onmouseover=function() {clearInterval(MyMar)}<br> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
向右滚动
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<wbr><wbr><wbr><wbr><wbr> <table cellpadding="0" cellspacing="0" border="0"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <tr><td id="demo1" valign="top" align="center"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <table cellpadding="2" cellspacing="0" border="0"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <tr align="center"><br><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td><img src="<a href="http://www.haao.cn/logo.gif">http://www.haao.cn/logo.gif</a>" width="88"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </tr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </table><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td id="demo2" valign="top"></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </tr><br><wbr><wbr><wbr><wbr><wbr> </table><br><wbr><wbr><wbr> </div><br> <script><br> var speed=1//速度数值越大速度越慢<br> demo2.innerHTML=demo1.innerHTML<br> function Marquee(){<br> if(demo.scrollLeft<=0)<br> demo.scrollLeft+=demo2.offsetWidth<br> else{<br> demo.scrollLeft--<br> }<br> }<br> var MyMar=setInterval(Marquee,speed)<br> demo.onmouseover=function() {clearInterval(MyMar)}<br> demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
扫一扫
1294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
