本文實例講述了JS實現的N多簡單無縫滾動代碼。分享給大家供大家參考，具體如下：
實現原理很簡單，注冊事件之后，立即將元素的innerHTML累加一次。
接著滾動開始，當滾動條到達元素的中間位置時：
不要在子元素上設置margin和padding，因為CSS對margin或padding的疊加機制，會導致滾動出現“跳躍”。穩妥的辦法是套一個內聯元素，然后再在里面設置margin或者padding！
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-n-txt-pic-scroll-codes/
具體代碼如下：
<!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程序設計有所幫助。
新聞熱點
疑難解答
