日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用JavaScript制作連續(xù)滾動字幕

我們一般都用Marquee標(biāo)簽控制元素的滾動。但是單向的Marquee滾動是不連續(xù)的，每滾完一幕，就會出現(xiàn)一次空白。而下面介紹中的滾動則是連續(xù)的，毫不間斷。

10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有崇仁免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

推薦專題：JavaScript網(wǎng)頁開發(fā)指南

下面小陽為你介紹這是如何實現(xiàn)的。

為了滾動能夠“連續(xù)”，我們需要將字幕的內(nèi)容復(fù)制多遍，直到內(nèi)容的高度不小于滾動區(qū)高度的兩倍。然后我們將溢出的滾動條隱藏掉，用代碼控制滾動條向下移動(這時內(nèi)容將向上移動)。當(dāng)滾動條滾動到最下方時，理論上不能再往下滾動了，于是我們立刻調(diào)整滾動條，將它向上滾動到一個和當(dāng)前畫面一樣的位置。結(jié)果我們看到的就是連續(xù)的滾動了。呵呵，說的就是這么簡單，那做起來如何呢？我們看看是如何逐步實現(xiàn)的。

 
 
 
    
  
  
  
  1. ＜div id="marquees"> ＜!-- 這些是字幕的內(nèi)容，你可以任意定義 --> ＜a href="#">鏈接一＜/a> 
    2. 
  
  
  
  2. ＜br> ＜a href="#">鏈接二＜/a> 
    3. 
  
  
  
  3. ＜br> ＜a href="#">鏈接三＜/a> 
    4. 
  
  
  
  4. ＜br> ＜a href="#">鏈接四＜/a> 
    5. 
  
  
  
  5. ＜br> ＜!-- 字幕內(nèi)容結(jié)束 --> 
    6. 
  
  
  
  6. ＜/div>  
    7. 
  
  
  
  7. ＜!-- 以下是java-script代碼 --> 
    8. 
  
  
  
  8. ＜script language="java-script"> 
    9. 
  
  
  
  9. ＜!-- 
    10. 
  
  
  
  10. marqueesHeight=200; //內(nèi)容區(qū)高度 
    11. 
  
  
  
  11. stopscroll=false; //這個變量控制是否停止?jié)L動 
    12. 
  
  
  
  12. with(marquees){ 
    13. 
  
  
  
  13. noWrap=true; //這句表內(nèi)容區(qū)不自動換行 
    14. 
  
  
  
  14. style.width=0; //于是我們可以將它的寬度設(shè)為0，因為它會被撐大 
    15. 
  
  
  
  15. style.height=marqueesHeight; 
    16. 
  
  
  
  16. style.overflowY="hidden"; //滾動條不可見 
    17. 
  
  
  
  17. onmouseover=new Function("stopscroll=true"); //鼠標(biāo)經(jīng)過，停止?jié)L動 
    18. 
  
  
  
  18. onmouseout=new Function("stopscroll=false"); //鼠標(biāo)離開，開始滾動 
    19. 
  
  
  
  19. } 
    20. 
  
  
  
  20. //這時候，內(nèi)容區(qū)的高度是無法讀取了。下面輸出一個不可見的層"templayer"，稍后將內(nèi)容復(fù)制到里面： 
    21. 
  
  
  
  21. document.write('＜div id="templayer"
    22. 
  
  
  
  22. style="position:absolute;z-index:1;visibility:hidden">＜/div>'); 
    23. 
  
  
  
  23. function init(){ //初始化滾動內(nèi)容 
    24. 
  
  
  
  24. //多次復(fù)制原內(nèi)容到"templayer"，直到"templayer"的高度大于內(nèi)容區(qū)高度： 
    25. 
  
  
  
  25. while(templayer.offsetHeight＜marqueesHeight){ 
    26. 
  
  
  
  26. templayer.innerHTML+=marquees.innerHTML; 
    27. 
  
  
  
  27. } //把"templayer"的內(nèi)容的“兩倍”復(fù)制回原內(nèi)容區(qū)： 
    28. 
  
  
  
  28. marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; 
    29. 
  
  
  
  29. //設(shè)置連續(xù)超時，調(diào)用"scrollUp()"函數(shù)驅(qū)動滾動條： 
    30. 
  
  
  
  30. setInterval("scrollUp()",10); 
    31. 
  
  
  
  31. } 
    32. 
  
  
  
  32. document.body.onload=init; 
    33. 
  
  
  
  33. preTop=0; //這個變量用于判斷滾動條是否已經(jīng)到了盡頭 
    34. 
  
  
  
  34. function scrollUp(){ //滾動條的驅(qū)動函數(shù) 
    35. 
  
  
  
  35. if(stopscroll==true) return; //如果變量"stopscroll"為真，則停止?jié)L動  
    36. 
  
  
  
  36. preTop=marquees.scrollTop; //記錄滾動前的滾動條位置 
    37. 
  
  
  
  37. marquees.scrollTop+=1; //滾動條向下移動一個像素 
    38. 
  
  
  
  38. //如果滾動條不動了，則向上滾動到和當(dāng)前畫面一樣的位置 
    39. 
  
  
  
  39. //當(dāng)然不僅如此，同樣還要向下滾動一個像素(+1)： 
    40. 
  
  
  
  40. if(preTop==marquees.scrollTop){ 
    41. 
  
  
  
  41. marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1; 
    42. 
  
  
  
  42. } 
    43. 
  
  
  
  43. } 
    44. 
  
  
  
  44. --> 
    45. 
  
  
  
  45. ＜/script>
    46.

這樣就完成了，感覺做起來也不難吧。


網(wǎng)站標(biāo)題：用JavaScript制作連續(xù)滾動字幕
文章網(wǎng)址：http://www.5511xx.com/article/djdsigc.html