快捷導(dǎo)航

JS實現(xiàn)的N多簡單無縫滾動代碼(包含圖文效果)

更新時間：2015年11月06日 09:29:59 作者：企鵝

這篇文章主要介紹了JS實現(xiàn)的N多簡單無縫滾動代碼,包含了文字及圖文等多種滾動效果,涉及JavaScript遞歸調(diào)用及定時函數(shù)觸發(fā)實現(xiàn)頁面元素動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)的N多簡單無縫滾動代碼。分享給大家供大家參考，具體如下：

實現(xiàn)原理很簡單，注冊事件之后，立即將元素的innerHTML累加一次。

接著滾動開始，當(dāng)滾動條到達(dá)元素的中間位置時：

不要在子元素上設(shè)置margin和padding，因為CSS對margin或padding的疊加機制，會導(dǎo)致滾動出現(xiàn)“跳躍”。穩(wěn)妥的辦法是套一個內(nèi)聯(lián)元素，然后再在里面設(shè)置margin或者padding！

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/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>較簡單的無縫滾動實現(xiàn)辦法</h1>
<p class="tips">切記：不要在子元素上設(shè)置margin和padding，因為CSS對margin或padding的疊加機制，會導(dǎo)致滾動出現(xiàn)“跳躍”。穩(wěn)妥的辦法是套一個內(nèi)聯(lián)元素，然后再在里面設(shè)置margin或者padding！為什么滾動到一半就跳轉(zhuǎn)到頂部了呢？因為obj.innerHTML=obj.innerHTML+obj.innerHTML，它迷惑了你。。。。</p>
<h2>第一個，設(shè)置非標(biāo)準(zhǔn)屬性delay，所以要快些</h2>
<div class="seamless" style="height:100px;" id="obj" delay="10">
 <p><span>藍(lán)色理想維基是一個以藍(lán)色理想社區(qū) 用戶為基礎(chǔ)的維基系統(tǒng)。 只要是社區(qū)的用戶，并達(dá)到初級用戶級別，就能對本站的頁面進(jìn)行增加和編輯。</span></p>
 <p><span>我們目前使用這套系統(tǒng)來完成我們網(wǎng)站的各項幫助。比如論壇怎么使用，怎么找回密碼一類的問題。另外還用來記錄一些網(wǎng)站，會員的各項歷史信息。</span></p>
 <p><span>長期的打算是解決社區(qū)的技術(shù)版塊中重復(fù)提出的基礎(chǔ)問題。因為論壇回復(fù)很不規(guī)范，需要用戶自己從回復(fù)中整理和測試，另外很容易被帖子內(nèi)容淹沒，沒有有效地進(jìn)行整理和規(guī)范。</span></p>
 <p><span>我們想利用高素質(zhì)的網(wǎng)站會員在HTML方面的專業(yè)知識，來完成一個協(xié)作的WEB知識庫，造福大眾。</span></p>
 <p><span>藍(lán)色理想維基標(biāo)識設(shè)計師是:bobpop，標(biāo)識版權(quán)屬于支付寶。</span></p>
</div>
<h2>第二個，如果未設(shè)置delay，則默認(rèn)100毫秒的頻率滾動</h2>
<div class="seamless" style="height:50px;">
 <p><span>缺陷：不能對子標(biāo)簽設(shè)置margin或者padding。</span></p>
 <p><span>怎么辦呢？跟上面一樣，里面套一個span標(biāo)簽，然后就可以設(shè)置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);
   //關(guān)鍵之處?。?
   o.innerHTML=o.innerHTML+o.innerHTML;
  }
 }
 //注冊函數(shù)
 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程序設(shè)計有所幫助。

您可能感興趣的文章: