JS实现的N多简单无缝滚动代码(包含图文效果)
内容摘要
本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考,具体如下:
实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次。
接着滚动开始,当滚动条到达元素的
实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次。
接着滚动开始,当滚动条到达元素的
文章正文
本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考,具体如下:
实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次。
接着滚动开始,当滚动条到达元素的中间位置时:
不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding!
运行效果截图如下:
在线演示地址如下:
http://demo.phpstudy.net/js/2015/js-n-txt-pic-scroll-codes/
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <style type= "text/css" > body{width:80%;margin:0 auto;color:#00a;} h2{font-size:120%;margin:1em auto;text-align:center;} div{border:solid 1px #0a0;font-size:12px;overflow:hidden;width:500px;margin:1em auto;} p{padding:0;margin:0;} p span{display:inline-block;margin:1em;} p b{margin:1em .5em;display:inline-block;font-size:120%;color:red;} .tips{border:solid 1px red;background:#FFC;padding:.5em;} </style> <title>无缝滚动</title> </head> <body> <h1>较简单的无缝滚动实现办法</h1> <p class = "tips" >切记:不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding!为什么滚动到一半就跳转到顶部了呢?因为obj.innerHTML=obj.innerHTML+obj.innerHTML,它迷惑了你。。。。</p> <h2>第一个,设置非标准属性delay,所以要快些</h2> <div class = "seamless" style= "height:100px;" id= "obj" delay= "10" > <p><span>蓝色理想维基是一个以蓝色理想社区 用户为基础的维基系统。 只要是社区的用户,并达到初级用户级别,就能对本站的页面进行增加和编辑。</span></p> <p><span>我们目前使用这套系统来完成我们网站的各项帮助。比如论坛怎么使用,怎么找回密码一类的问题。另外还用来记录一些网站,会员的各项历史信息。</span></p> <p><span>长期的打算是解决社区的技术版块中重复提出的基础问题。因为论坛回复很不规范,需要用户自己从回复中整理和测试,另外很容易被帖子内容淹没,没有有效地进行整理和规范。</span></p> <p><span>我们想利用高素质的网站会员在HTML方面的专业知识,来完成一个协作的WEB知识库,造福大众。</span></p> <p><span>蓝色理想维基标识设计师是:bobpop,标识版权属于支付宝。</span></p> </div> <h2>第二个,如果未设置delay,则默认100毫秒的频率滚动</h2> <div class = "seamless" style= "height:50px;" > <p><span>缺陷:不能对子标签设置margin或者padding。</span></p> <p><span>怎么办呢?跟上面一样,里面套一个span标签,然后就可以设置margin,padding了。</span></p> <p><span>算是一个缺点吧。</span></p> </div> <h2>第三个,可以停止的,因为 class = "seamless <strong style=" color:red; ">allowStop</strong>" </h2> <div class = "seamless allowStop" style= "height:90px;width:150px;" delay= "9" > <p><span><img src= "images/frown.gif" width= "50" /></span></p> <p><span><img src= "images/redface.gif" /></span></p> <p><span><img src= "images/biggrin.gif" width= "90" /></span></p> <p><span><img src= "images/wink.gif" width= "120" /></span></p> <p><span><img src= "images/tongue.gif" width= "40" /></span></p> <p><span><img src= "images/cool.gif" align= "right" height= "40" /></span></p> <p><span><img src= "images/rolleyes.gif" width= "70" /></span></p> <p><span><img src= "images/confused.gif" /></span></p> <p><span><img src= "images/han.gif" /></span></p> </div> </body> </html> <script type= "text/javascript" > ( function (c){ var obj=document.getElementsByTagName( "div" ); var _l=obj.length; var o; for ( var i=0;i<_l;i++){ o=obj[i]; var n2=o.clientHeight; var n3=o.scrollHeight; o.s=0; if (o.className.indexOf(c)>=0){ if (n3<=n2){ return false;} var delay=parseInt(o.getAttribute( "delay" ),10); if (isNaN(delay)){delay=100;} if (o.className.indexOf( "allowStop" )>=0){ o.onmouseover= function (){this.Stop=true;} o.onmouseout= function (){this.Stop=false;} } giveInterval(autoRun,delay,o); //关键之处!! o.innerHTML=o.innerHTML+o.innerHTML; } } //注册函数 function giveInterval(funcName,time){ var args=[]; for ( var i=2;i<arguments.length;i++){args.push(arguments[i]);} return window.setInterval( function (){funcName.apply(this,args);},time);} function autoRun(o,s){ if (o.Stop==true){ return false;} var n1=o.scrollTop; var n3=o.scrollHeight; o.s++; o.scrollTop=o.s; if (n1>=n3/2){ o.scrollTop=0; o.s=0; } } })( 'seamless' ) </script> |
希望本文所述对大家JavaScript程序设计有所帮助。
代码注释