自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

不間斷滾動圖片Javascript特效講解

作者：佚名
開發(fā) 后端
本文根據(jù)一個(gè)實(shí)例來分析JavaScript特效代碼。通過學(xué)習(xí)本教程，可以學(xué)會不間斷滾動圖片的JavaScript實(shí)現(xiàn)方法。

我們來分析下代碼（代碼中我已經(jīng)寫了很詳細(xì)的注釋），要之其所以然，在解讀別人的代碼中學(xué)習(xí)提高自己，然后可以靈活運(yùn)用，這個(gè)才是我將這個(gè)效果貼出來的主要目的，代碼如下：

scrollver.js

  1. scrollVertical.prototype.scrollArea=null;      // 滾動的區(qū)域  
  2. scrollVertical.prototype.scrollMsg=null;       // 要滾動的內(nèi)容  
  3. scrollVertical.prototype.unitHeight=0;         // 單獨(dú)一行滾動內(nèi)容的高度（程序中通過過的要滾動行的一個(gè)節(jié)點(diǎn)的offsetHeight獲得）   
  4. scrollVertical.prototype.msgHeight=0;          // 整個(gè)滾動內(nèi)容的高度  
  5. scrollVertical.prototype.copyMsg=null;         // 復(fù)制滾動內(nèi)容（程序中使用復(fù)制scrollMsg.innerHTML來獲得的）  
  6. scrollVertical.prototype.scrollValue=0;        // 滾動的值  
  7. scrollVertical.prototype.scrollHeight=0;       // 滾動高度  
  8. scrollVertical.prototype.isStop=true;          // 停止?jié)L動  
  9. scrollVertical.prototype.isPause=false;        // 暫停滾動   
  10. scrollVertical.prototype.scrollTimer=null;     // 滾動計(jì)時(shí)器  
  11. scrollVertical.prototype.speed=2000;           // (默認(rèn))滾動的時(shí)間間隔2秒  
  12. /**  
  13. * @method isMoz - 判斷是否為Mozilla系列瀏覽器  
  14. */   
  15. scrollVertical.prototype.isMoz = function(){  
  16.     return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;  
  17. };  
  18. /**  
  19. * @method play - 滾動信息的處理方法（函數(shù)）  
  20. * @param {Object} o - 滾動類  
  21. */   
  22. scrollVertical.prototype.play = function(o){  
  23.     var s_msg = o.scrollMsg;  
  24.     var c_msg = o.copyMsg;  
  25.     var s_area = o.scrollArea;  
  26.     var msg_h = o.msgHeight;  
  27.       
  28.     var anim = function(){  
  29.         // 如果已經(jīng)開始計(jì)時(shí)（間隔時(shí)間執(zhí)行向上滾動），  
  30.         // 就停止它（以免無限制執(zhí)行，耗系統(tǒng)資源）。  
  31.         if (o.scrollTimer) {   
  32.             clearTimeout(o.scrollTimer);  
  33.         }  
  34.         // 如果暫停了滾動（鼠標(biāo)放到了滾動層上）  
  35.         // 開始以10毫秒的時(shí)間間隔運(yùn)行滾動      
  36.         if (o.isPause) {  
  37.             o.scrollTimer = setTimeout(anim, 10);  
  38.             return;  
  39.         }  
  40.         // 當(dāng)顯示完所有信息后（這時(shí)滾動的距離就等于要滾動信息的高度msg_h）  
  41.         // 這時(shí)又重新開始滾動，將滾動距離清零  
  42.         if (msg_h - o.scrollValue <= 0) {  
  43.             o.scrollValue = 0;  
  44.         }  
  45.         else {  
  46.             o.scrollValue += 1;  
  47.             o.scrollHeight += 1;  
  48.         }  
  49.         // 根據(jù)瀏覽器的不同，處理滾動  
  50.         if (o.isMoz) { // Mozilla引擎瀏覽器  
  51.             s_area.scrollTop = o.scrollValue;  
  52.         }  
  53.         else { // 其余的瀏覽器則使用控制CSS樣式處理滾動  
  54.             s_msg.style.top = -1 * o.scrollValue + "px";  
  55.             c_msg.style.top = (msg_h - o.scrollValue) + "px";  
  56.         }  
  57.         // 滾動高度等于顯示滾動區(qū)域高度時(shí)（滾動完一行，一行內(nèi)容全部顯示）  
  58.         // 暫停4秒中，然后再開始執(zhí)行下依次滾動。  
  59.         if (o.scrollHeight % s_area.offsetHeight == 0) {  
  60.             o.scrollTimer = setTimeout(anim, o.speed);  
  61.         }  
  62.         else {  
  63.             // 在兩行內(nèi)容之間過度滾動時(shí)，每10豪秒上升1px  
  64.             o.scrollTimer = setTimeout(anim, 10);  
  65.         }  
  66.     };  
  67.     // 執(zhí)行滾動  
  68.     anim();  
  69. };  
  70. /**  
  71. * scrollVertical 垂直滾動的構(gòu)造函數(shù)  
  72. * @param {Object} disp   - 必須 顯示滾動區(qū)域的DOM節(jié)點(diǎn)（或節(jié)點(diǎn)ID）   
  73. * @param {Object} msg    - 必須 被顯示的信息的DOM節(jié)點(diǎn)（或節(jié)點(diǎn)ID）  
  74. * @param {string} tg     - 可選 以什么標(biāo)記為一行的標(biāo)簽名稱（tagName）  
  75. */ 
  76. function scrollVertical(disp, msg, tg){  
  77.     // 給在之前定義的this.scrollArea付值  
  78.     if (typeof(disp) == 'string') {  
  79.         // 如果disp給的是節(jié)點(diǎn)的ID，通過document.getElementById獲取該節(jié)點(diǎn)  
  80.         // 然后付值給this.scrollArea  
  81.         this.scrollArea = document.getElementById(disp);  
  82.     }  
  83.     else {  
  84.         // 如果是DOM節(jié)點(diǎn)，直接付給this.scrollArea  
  85.         this.scrollArea = disp;  
  86.     }  
  87.     // 以給this.scrollArea相同的方法給this.scrollMsg付值  
  88.     if (typeof(msg) == 'string') {  
  89.         this.scrollMsg = document.getElementById(msg);  
  90.     }  
  91.     else {  
  92.         this.scrollMsg = msg;  
  93.     }  
  94.       
  95.     // 為了開發(fā)方便，  
  96.     // 不用一直寫this.scrollMsg這么常的名字，  
  97.     // 將兩個(gè)對象付給局部變量  
  98.     var s_msg = this.scrollMsg;  
  99.     var s_area = this.scrollArea;  
  100.       
  101.     // 如果沒有給定一行的識別標(biāo)簽，  
  102.     // 默認(rèn)將li標(biāo)簽認(rèn)為是一行的標(biāo)簽  
  103.     // 所以上面介紹的，tag參數(shù)是可選的  
  104.     if (!tg) {  
  105.         var tg = 'li';  
  106.     }  
  107.       
  108.     // 獲取單行的高度  
  109.     // 獲取到***(s_msg.getElementsByTagName(tg)[0])tg(一行的標(biāo)簽)的高度，作為單行的高度  
  110.     this.unitHeight = s_msg.getElementsByTagName(tg)[0].offsetHeight;  
  111.     // 獲取整個(gè)信息框的高度  
  112.     // 公式為 單行高度（unitHeight）*行數(shù)（s_msg.getElementsByTagName(tg).length，顯示信息中包含多少個(gè)tg(行)標(biāo)簽）  
  113.     this.msgHeight = this.unitHeight * s_msg.getElementsByTagName(tg).length;  
  114.     /*   
  115.      * 復(fù)制要顯示的信息：  
  116.      * 連續(xù)滾動的實(shí)現(xiàn)其實(shí)就是通過復(fù)制信息，  
  117.      * 并將復(fù)制的信添加到原始信息后  
  118.      * 當(dāng)原始信息滾動顯示完成，就接著滾動顯示復(fù)制的信息  
  119.      * 但給人的錯(cuò)覺是，我們看到信息連續(xù)不斷的顯示  
  120.      */ 
  121.     // 創(chuàng)建復(fù)制內(nèi)容節(jié)點(diǎn)  
  122.     var copydiv = document.createElement('div');  
  123.     // 這個(gè)地方感覺有點(diǎn)嵌妥  
  124.     // 直接使用element.id的方式，不過看上去，主流的瀏覽器都支持  
  125.     // 標(biāo)準(zhǔn)的DOM Core方法：  
  126.     // copydiv.setAttribute('id',s_area.id + "_copymsgid")  
  127.     copydiv.id = s_area.id + "_copymsgid";  
  128.     // 復(fù)制原始的信息  
  129.     // 將原始的信息s_msg中的內(nèi)容，直接用innerHTML寫到  
  130.     copydiv.innerHTML = s_msg.innerHTML;  
  131.     // 設(shè)置復(fù)制信息節(jié)點(diǎn)的高度  
  132.     copydiv.style.height = this.msgHeight + "px";  
  133.     // 將復(fù)制節(jié)點(diǎn)添加到原始接點(diǎn)（scrollMsg）后  
  134.     // 其實(shí)實(shí)現(xiàn)的方法就是將復(fù)制信息節(jié)點(diǎn)（copydiv）添家到顯示區(qū)域的節(jié)點(diǎn)（scrollArea）中  
  135.     s_area.appendChild(copydiv);  
  136.       
  137.     this.copyMsg = copydiv;  
  138.     // 開始執(zhí)行滾動方法  
  139.     this.play(this);  
  140. }  
  141.  

我在腳本的注釋中已經(jīng)說了這個(gè)效果的實(shí)現(xiàn)原理，而實(shí)現(xiàn)一個(gè)效果的關(guān)鍵就是在于運(yùn)用setTimeout方法和clearTimeout方法。

setTimeout(func,time)

setTimeout是window對象的一個(gè)方法，所以如果要是看到這么寫window.setTimeout你不要感到奇怪，我們平時(shí)一般都省略了window。

setTimeout方法接受兩個(gè)參數(shù)：
func - 在指定時(shí)間間隔內(nèi)要執(zhí)行的函數(shù)；
time - 執(zhí)行函數(shù)的時(shí)間間隔（以毫秒為單位，1000毫秒等于1秒）

我一開始沒有解釋setTimeout的功能，而是先說了兩個(gè)參數(shù)的意思，我想大家看了后就會有所了解，setTimeout的功能就是：設(shè)置定時(shí)器，在一段時(shí)間之后執(zhí)行指定的代碼。

不如本例中的：

setTimeout(anim, o.speed);

也許你有看過類似的寫法：

  1. function dosomething(){  
  2.     // do something  
  3. }  
  4. setTimeOout('dosomething',1000); 

個(gè)人建議不要這么寫，是這樣的代碼的可讀性太差，雖然也可以正常執(zhí)行。相信你看到的類似的代碼也是很久前的東西了。如果你還在新買的某本書中看到這樣的寫法，我想你可能很不幸買了本爛書?，F(xiàn)在一般我們都這么做：

  1. function whatWeDoNow(){  
  2.     var str = 'this is what we do now';  
  3.     if(doalert) {  
  4.        clearTimeout(doalert)  
  5.     }     
  6.     var doalert = setTimeout(function(){  
  7.        alert(str);  
  8.     },1000);  
  9. } 

而且不知道你發(fā)現(xiàn)沒有，這么寫還有一個(gè)好處，你的function還可以接受其他的參數(shù)，比如這里我們可以接受whatWeDoNow()函數(shù)中的局部變量。如果你再結(jié)合閉包的使用，好處會更顯而易見。

剛才說的一點(diǎn)應(yīng)該說是一個(gè)不好的使用setTimeout的習(xí)慣。呵呵，接下來我還要說的一個(gè)更不好的使用習(xí)慣就是只使用setTimeout()方法，而不使用clearTimeout()方法。

clearTimeout(itimeoutid)

clearTimeout()方法的功能是停止定時(shí)器，大家看上面的代碼：

clearTimeout(o.scrollTimer);

Timer（定時(shí)器），夠直接吧。那么為什么要停止定時(shí)器？什么時(shí)候停止呢？

為什么要停，我想用個(gè)反問：能一直不停嗎，你的機(jī)器受得了嗎？這里我想應(yīng)該說說我們使用setTimeout的目的，我們通常使用它來實(shí)現(xiàn)像本例這 樣的動畫效果。需要在很短的時(shí)間內(nèi)連續(xù)不斷的執(zhí)行定時(shí)器，當(dāng)然它是要占資源的啊。想想，只是不斷的創(chuàng)建，而且往往我們做的處理，在1秒中內(nèi)會執(zhí)行很多次函 數(shù)，一兩次還好，上百上千次，而且一個(gè)復(fù)雜些的動畫，執(zhí)行很短的時(shí)間內(nèi)幾萬次也不是沒有可能事情。你想想，如果我們不在每執(zhí)行完一次后，銷毀它。要是再加 上定時(shí)器執(zhí)行的函數(shù)又是個(gè)比較NB點(diǎn)的運(yùn)算，你的寶貴的系統(tǒng)資源...，呵呵！

所以應(yīng)該向我給的例子中那樣，記得在每次執(zhí)行了定時(shí)器后停止（銷毀，釋放資源）它。

  1. function whatWeDoNow(){  
  2.     var str = 'this is what we do now';  
  3.     if(doalert) {  
  4.        clearTimeout(doalert); // clear  
  5.     }     
  6.     var doalert = setTimeout(function(){  
  7.        alert(str);  
  8.     },1000);  
  9. }  
  10. if (o.scrollTimer) {   
  11.     clearTimeout(o.scrollTimer); // clear  
  12. } 

呵呵，其實(shí)銷毀的方法很簡單，就是在每次創(chuàng)建定時(shí)器前，判斷是否已經(jīng)創(chuàng)建了訂時(shí)器，就像特效例子中的

  1. if (o.scrollTimer) {   
  2.     clearTimeout(o.scrollTimer); // clear  
  3. }  
  4. ....  
  5. ....  
  6. if (o.scrollHeight % s_area.offsetHeight == 0) {  
  7.     o.scrollTimer = setTimeout(anim, o.speed);  
  8. }  
  9. else {  
  10.     o.scrollTimer = setTimeout(anim, 10);  
  11. } 

是不是一個(gè)很流暢的循環(huán)？現(xiàn)在大家應(yīng)該知道了，為什么要clearTimeout和何時(shí)clearTimeout了嗎？


【編輯推薦】

  1. 不唐突的JavaScript的七條準(zhǔn)則
  2. JavaScript中的Object到底是什么
  3. JavaOne 2009第三天：微軟與Sun/Oracle攜手并進(jìn)
  4. 開發(fā)高可移植性J2ME的軟件
  5. Java虛擬機(jī)（JVM）中的內(nèi)存設(shè)置詳解
責(zé)任編輯：王觀 來源： 動態(tài)網(wǎng)站制作指南
滾動圖片Javascript特效
相關(guān)推薦

2016-03-27 15:06:02

Veeam／業(yè)務(wù)永續(xù)

2015-01-26 16:58:38

ISSU在線升級技術(shù)不間斷網(wǎng)絡(luò)華為

2023-10-25 08:01:30

redis主庫服務(wù)

2011-06-15 11:14:58

惠普集裝箱EcoPOD

2011-09-19 13:03:02

2011-07-22 13:30:52

JavaScript

2009-11-04 21:47:55

2021-02-22 22:06:54

軟件安全數(shù)據(jù)安全漏洞

2018-08-20 15:43:51

新華三

2023-08-29 17:08:14

5G物聯(lián)網(wǎng)

2024-01-25 10:20:40

防火墻網(wǎng)絡(luò) 安全雙機(jī)熱備

2021-10-09 17:27:21

數(shù)據(jù)中心數(shù)字化轉(zhuǎn)型IT

2010-05-14 16:34:59

IT管理移動通信Avocent

2012-03-15 17:46:49

BanggooADC應(yīng)用交付

2022-09-09 14:23:32

數(shù)據(jù)中心IT服務(wù)

2015-12-28 15:24:48

數(shù)據(jù)中心網(wǎng)絡(luò)設(shè)備

2009-12-01 11:31:59

不間斷電源

2011-11-10 15:14:54

華碩無線路由RT-N13U

2013-06-20 09:38:08

華為UPS華為
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號