图片无缝滚动、文字无缝滚动的简单例子

发布时间：2018-08-24 18:52:11 所属栏目：编程来源：站长网

导读：图片无缝转动、笔墨无缝转动的简朴例子道理很简朴，注册变乱之后，当即将元素的innerHTML累加一次。接着转动开始，当转动条达到元素的中间位置时：不要在子元素上配置margin和padding，由于CSS对margin或padding的叠加机制，会导致转动呈现跳跃。稳妥的

　　图片无缝转动、笔墨无缝转动的简朴例子

　　道理很简朴，注册变乱之后，当即将元素的innerHTML累加一次。

　　接着转动开始，当转动条达到元素的中间位置时：

　　不要在子元素上配置margin和padding，由于CSS对margin或padding的叠加机制，会导致转动呈现“跳跃”。稳妥的步伐是套一个内联元素，然后再在内里配置margin可能padding！

　　克日，有许多站长恶意收罗烈。火。网（Liehuo。Net）的文章，关于此，猛火颁发最新声明：http://www.veryhuo.com/help/mianze.html

<!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>js简质朴现无缝转动 - 猛火学院 Liehuo.Net</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，标识版权属于<b>付出宝</b>。</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="10"> <p><span><img src="/uploads/allimg/1009/smile.gif" width="" /></span></p> <p><span><img src="/uploads/allimg/1009/frown.gif" width="50" /></span></p> <p><span><img src="/uploads/allimg/1009/redface.gif" /></span></p> <p><span><img src="/uploads/allimg/1009/biggrin.gif" width="90" /></span></p> <p><span><img src="/uploads/allimg/1009/wink.gif" width="120" /></span></p> <p><span><img src="/uploads/allimg/1009/tongue.gif" width="40" /></span></p> <p><span><img src="/uploads/allimg/1009/cool.gif" align="right" height="40" /></span></p> <p><span><img src="/uploads/allimg/1009/rolleyes.gif" width="70" /></span></p> <p><span><img src="/uploads/allimg/1009/confused.gif" /></span></p> <p><span><img src="/uploads/allimg/1009/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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys