成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

作者：佚名
開發 后端
本文根據一個實例來分析JavaScript特效代碼。通過學習本教程，可以學會不間斷滾動圖片的JavaScript實現方法。

我們來分析下代碼（代碼中我已經寫了很詳細的注釋），要之其所以然，在解讀別人的代碼中學習提高自己，然后可以靈活運用，這個才是我將這個效果貼出來的主要目的，代碼如下：

scrollver.js

  1. scrollVertical.prototype.scrollArea=null;      // 滾動的區域  
  2. scrollVertical.prototype.scrollMsg=null;       // 要滾動的內容  
  3. scrollVertical.prototype.unitHeight=0;         // 單獨一行滾動內容的高度（程序中通過過的要滾動行的一個節點的offsetHeight獲得）   
  4. scrollVertical.prototype.msgHeight=0;          // 整個滾動內容的高度  
  5. scrollVertical.prototype.copyMsg=null;         // 復制滾動內容（程序中使用復制scrollMsg.innerHTML來獲得的）  
  6. scrollVertical.prototype.scrollValue=0;        // 滾動的值  
  7. scrollVertical.prototype.scrollHeight=0;       // 滾動高度  
  8. scrollVertical.prototype.isStop=true;          // 停止滾動  
  9. scrollVertical.prototype.isPause=false;        // 暫停滾動   
  10. scrollVertical.prototype.scrollTimer=null;     // 滾動計時器  
  11. scrollVertical.prototype.speed=2000;           // (默認)滾動的時間間隔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 - 滾動信息的處理方法（函數）  
  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.         // 如果已經開始計時（間隔時間執行向上滾動），  
  30.         // 就停止它（以免無限制執行，耗系統資源）。  
  31.         if (o.scrollTimer) {   
  32.             clearTimeout(o.scrollTimer);  
  33.         }  
  34.         // 如果暫停了滾動（鼠標放到了滾動層上）  
  35.         // 開始以10毫秒的時間間隔運行滾動      
  36.         if (o.isPause) {  
  37.             o.scrollTimer = setTimeout(anim, 10);  
  38.             return;  
  39.         }  
  40.         // 當顯示完所有信息后（這時滾動的距離就等于要滾動信息的高度msg_h）  
  41.         // 這時又重新開始滾動，將滾動距離清零  
  42.         if (msg_h - o.scrollValue <= 0) {  
  43.             o.scrollValue = 0;  
  44.         }  
  45.         else {  
  46.             o.scrollValue += 1;  
  47.             o.scrollHeight += 1;  
  48.         }  
  49.         // 根據瀏覽器的不同，處理滾動  
  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.         // 滾動高度等于顯示滾動區域高度時（滾動完一行，一行內容全部顯示）  
  58.         // 暫停4秒中，然后再開始執行下依次滾動。  
  59.         if (o.scrollHeight % s_area.offsetHeight == 0) {  
  60.             o.scrollTimer = setTimeout(anim, o.speed);  
  61.         }  
  62.         else {  
  63.             // 在兩行內容之間過度滾動時，每10豪秒上升1px  
  64.             o.scrollTimer = setTimeout(anim, 10);  
  65.         }  
  66.     };  
  67.     // 執行滾動  
  68.     anim();  
  69. };  
  70. /**  
  71. * scrollVertical 垂直滾動的構造函數  
  72. * @param {Object} disp   - 必須 顯示滾動區域的DOM節點（或節點ID）   
  73. * @param {Object} msg    - 必須 被顯示的信息的DOM節點（或節點ID）  
  74. * @param {string} tg     - 可選 以什么標記為一行的標簽名稱（tagName）  
  75. */ 
  76. function scrollVertical(disp, msg, tg){  
  77.     // 給在之前定義的this.scrollArea付值  
  78.     if (typeof(disp) == 'string') {  
  79.         // 如果disp給的是節點的ID，通過document.getElementById獲取該節點  
  80.         // 然后付值給this.scrollArea  
  81.         this.scrollArea = document.getElementById(disp);  
  82.     }  
  83.     else {  
  84.         // 如果是DOM節點，直接付給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.     // 為了開發方便，  
  96.     // 不用一直寫this.scrollMsg這么常的名字，  
  97.     // 將兩個對象付給局部變量  
  98.     var s_msg = this.scrollMsg;  
  99.     var s_area = this.scrollArea;  
  100.       
  101.     // 如果沒有給定一行的識別標簽，  
  102.     // 默認將li標簽認為是一行的標簽  
  103.     // 所以上面介紹的，tag參數是可選的  
  104.     if (!tg) {  
  105.         var tg = 'li';  
  106.     }  
  107.       
  108.     // 獲取單行的高度  
  109.     // 獲取到***(s_msg.getElementsByTagName(tg)[0])tg(一行的標簽)的高度，作為單行的高度  
  110.     this.unitHeight = s_msg.getElementsByTagName(tg)[0].offsetHeight;  
  111.     // 獲取整個信息框的高度  
  112.     // 公式為 單行高度（unitHeight）*行數（s_msg.getElementsByTagName(tg).length，顯示信息中包含多少個tg(行)標簽）  
  113.     this.msgHeight = this.unitHeight * s_msg.getElementsByTagName(tg).length;  
  114.     /*   
  115.      * 復制要顯示的信息：  
  116.      * 連續滾動的實現其實就是通過復制信息，  
  117.      * 并將復制的信添加到原始信息后  
  118.      * 當原始信息滾動顯示完成，就接著滾動顯示復制的信息  
  119.      * 但給人的錯覺是，我們看到信息連續不斷的顯示  
  120.      */ 
  121.     // 創建復制內容節點  
  122.     var copydiv = document.createElement('div');  
  123.     // 這個地方感覺有點嵌妥  
  124.     // 直接使用element.id的方式，不過看上去，主流的瀏覽器都支持  
  125.     // 標準的DOM Core方法：  
  126.     // copydiv.setAttribute('id',s_area.id + "_copymsgid")  
  127.     copydiv.id = s_area.id + "_copymsgid";  
  128.     // 復制原始的信息  
  129.     // 將原始的信息s_msg中的內容，直接用innerHTML寫到  
  130.     copydiv.innerHTML = s_msg.innerHTML;  
  131.     // 設置復制信息節點的高度  
  132.     copydiv.style.height = this.msgHeight + "px";  
  133.     // 將復制節點添加到原始接點（scrollMsg）后  
  134.     // 其實實現的方法就是將復制信息節點（copydiv）添家到顯示區域的節點（scrollArea）中  
  135.     s_area.appendChild(copydiv);  
  136.       
  137.     this.copyMsg = copydiv;  
  138.     // 開始執行滾動方法  
  139.     this.play(this);  
  140. }  
  141.  

我在腳本的注釋中已經說了這個效果的實現原理，而實現一個效果的關鍵就是在于運用setTimeout方法和clearTimeout方法。

setTimeout(func,time)

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

setTimeout方法接受兩個參數：
func - 在指定時間間隔內要執行的函數；
time - 執行函數的時間間隔（以毫秒為單位，1000毫秒等于1秒）

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

不如本例中的：

setTimeout(anim, o.speed);

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

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

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

  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. } 

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

剛才說的一點應該說是一個不好的使用setTimeout的習慣。呵呵，接下來我還要說的一個更不好的使用習慣就是只使用setTimeout()方法，而不使用clearTimeout()方法。

clearTimeout(itimeoutid)

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

clearTimeout(o.scrollTimer);

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

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

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

  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. } 

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

  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. } 

是不是一個很流暢的循環？現在大家應該知道了，為什么要clearTimeout和何時clearTimeout了嗎？


【編輯推薦】

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

2016-03-27 15:06:02

Veeam／業務永續

2015-01-26 16:58:38

ISSU在線升級技術不間斷網絡華為

2023-10-25 08:01:30

redis主庫服務

2011-06-15 11:14:58

惠普集裝箱EcoPOD

2009-11-04 21:47:55

2023-08-29 17:08:14

5G物聯網

2018-08-20 15:43:51

新華三

2021-02-22 22:06:54

軟件安全數據安全漏洞

2024-01-25 10:20:40

防火墻網絡 安全雙機熱備

2011-09-19 13:03:02

2011-07-22 13:30:52

JavaScript

2009-12-01 11:31:59

不間斷電源

2011-11-10 15:14:54

華碩無線路由RT-N13U

2015-12-28 15:24:48

數據中心網絡設備

2022-09-09 14:23:32

數據中心IT服務

2021-10-09 17:27:21

數據中心數字化轉型IT

2010-05-14 16:34:59

IT管理移動通信Avocent

2012-03-15 17:46:49

BanggooADC應用交付

2013-06-20 09:38:08

華為UPS華為
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 黄色毛片在线观看 | 狠狠久久综合 | 久久久久精| 欧美视频二区 | www久久久 | 91极品欧美视频 | 日本一区二区影视 | 久久久综合色 | 免费成人高清在线视频 | 国产电影一区二区在线观看 | 中文字幕人成乱码在线观看 | 天天综合国产 | 国产精品欧美精品日韩精品 | 日韩久久精品 | 中文字幕在线人 | 欧美日韩成人影院 | 国产成人福利 | 成人在线网 | 亚洲成av| 国产精品美女久久久 | 中文字幕成人 | a级黄色片在线观看 | 免费一级欧美在线观看视频 | 一区二区三区免费在线观看 | 日本a网站 | 亚洲网站在线观看 | 亚洲一区二区三区免费在线观看 | 日日夜夜天天干 | 午夜免费成人 | 精品三区 | h视频免费在线观看 | 久久精品色欧美aⅴ一区二区 | 九九综合九九 | 中文字幕亚洲欧美 | 婷婷久久五月 | 欧美精品久久久久 | 亚洲一区毛片 | 欧美精品久久久 | 国产日韩精品久久 | 无码日韩精品一区二区免费 | 午夜精品久久久久久久久久久久久 |