———————–2008年12月26日更新—————————-
向上无缝滚动的封装已经发布:https://www.7psus5.com/article.asp?id=577
欢迎提出意见,建议,让我们共同进步!
——————————————————————————————–
实现思路:
一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop(上下滚动)或者scrollLeft(左右滚动)达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。
XML/HTML代码
- <!DOCTYPE?html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”?”https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??
- <html?xmlns=“https://www.w3.org/1999/xhtml”>??
- <head>??
- <meta?http-equiv=“Content-Type”?content=“text/html;?charset=utf-8”?/>??
- <title>无标题文档</title>??
- <style?type=“text/css”>??
- <!– ??
- ol,ul{list-style:none;?margin:0} ??
- li{?height:25px} ??
- —>??
- </style>??
- </head>??
- ??
- <body>??
- <div?id=“demo”?style=“?overflow:?hidden;?width:?322px;?height:?50px”>??
- ????<ul?id=“demo1”>??
- ????????<li>111</li>??
- ????????<li>222</li>??
- ????????<li>333</li>??
- ????????<li>444</li>??
- ????????<li>444</li>??
- ????????<li>444</li>??
- ????????<li>444</li>??
- ????????<li>444</li>??
- ????</ul>??
- ????<ul?id=“demo2”></ul>??
- </div>??
- <script?type=“text/javascript”>??
- ??
- ??var?speed1=0; ??
- ??var?MyMar1;??? ??
- ??
- ??
- ??function?toleft(){ ??
- ??????????speed1=30;//滚段速度 ??
- ??????????document.getElementById(“demo2”).innerHTML=document.getElementById(“demo1”).innerHTML; ??
- ??????????function?Marquee1(){ ??
- ??????????????//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetHeight与scrollTop刚好相等 ??
- ??????????????if(document.getElementById(“demo2”).offsetHeight-document.getElementById(“demo”).scrollTop<=0){ ??
- ??????????????????document.getElementById(“demo”).scrollTop-=document.getElementById(“demo2”).offsetHeight; ??
- ??????????????} ??
- ??????????????else{ ??
- ????????????????//demo开始重新移动 ??
- ????????????????document.getElementById(“demo”).scrollTop++; ??
- ??????????????} ??
- ??????????} ??
- ??????????//setInterval让Marquee1方法每隔多少秒执行一次,并把返回的调用次数ID ??
- ??????????MyMar1=setInterval(Marquee1,speed1); ??
- ??????????//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时,第一行和第二行的图片都会停止 ??
- ??????????document.getElementById(“demo”).onmouseover=function(){ ??
- ??????????????clearInterval(MyMar1); ??
- ??????????} ??
- ??????????//当鼠标移除demo时,重新setInterval让方法执行,这样图片会继续移动 ??
- ??????????document.getElementById(“demo”).onmouseout=function()? ??
- ??????????{ ??
- ??????????????MyMar1=setInterval(Marquee1,speed1); ??
- ??????????} ??
- ????????? ??
- ??} ??
- ??toleft(); ??
- </script>?? ??
- ??
- </body>??
- </html>??
码头在进段时间封装这种向上、向左、向右的无缝滚动,尽情关注。
当然也可以看看《【JS特效】不间断滚动效果通用类》:https://www.7psus5.com/article.asp?id=433
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂