首頁 > 開發者 > JavaScript
文字列表無縫向上滾動代碼：
<!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=gb2312" /><title>JavaScript實現文字列表無縫向上滾動</title><style>/*全域設定*/*{margin:0px;padding:0px;border:0px;}body{font-size:12px;}#marquee{overflow:hidden;height:100px;width:280px; margin:50px auto;}#marquee1{height:auto;}#marquee1 li{height:22px;}#marquee2{height:auto;}#marquee2 li{height:22px;}#result{width:300px;margin:10px auto;}</style></head><body><!-- 其實實現原理很簡單，marquee1 和marquee2 innerHTML 是一樣的嘛 ，假如marquee的scrollTop++ ,那麼只有marquee在往下移。恰好超過的部分隱藏，就感覺marquee沒有動，而是marquee1和marquee2他們向上移動，但是實際上他們從來沒有變過，關鍵就在於當marquee 的頂部已經到達marquee1 的底部的時候，立馬將marquee的scrollTop位置還原成初始狀態，這樣子就感覺 兩個div一直在滾個不停 --><div id="marquee"><div id="marquee1"> <ul> <li><a href="http://bbs.csdn.net/topics/390219560" style="color: red; font-weight: bold" target="_blank">微軟大會2012購票享7折優惠</a></li> <li><a href="http://bbs.csdn.net/topics/390270707" style="color: black" target="_blank">微軟Silverlight 5開發書籍匯總</a></li> <li><a href="http://bbs.csdn.net/topics/390269709" style="color: black" target="_blank">實現.Net代碼產生器討論帖</a></li> <li><a href="http://bbs.csdn.net/topics/390262160" style="color: black" target="_blank">探討查看SQL變更記錄的方法</a></li> <li><a href="http://www.csdn.net/article/2012-11-06/2811553" style="color: red; font-weight: bold" target="_blank">魏子鈞：HTML5和JavaScript將長存</a></li> <li><a href="http://bbs.csdn.net/topics/390272755" style="color: blue; font-weight: bold" target="_blank">Hadoop&BigData 技術贏門票活動</a></li> <li><a href="http://hbtc2012.hadooper.cn" style="color: red; font-weight: bold" target="_blank">Hadoop與大資料精彩議題發布</a></li> <li><a href="http://bbs.csdn.net/topics/390230868" style="color: blue; font-weight: bold" target="_blank">Cloud Foundry徵文大賽進行中</a></li> </ul></div><div id="marquee2"></div></div> <div id="result"></div><script>var browser=navigator.appName;var b_version=navigator.appVersion;var version=b_version.split(";");var trim_Version=version[1].replace(/[ ]/g,"");var speed=10; var marquee = document.getElementById("marquee"); var marquee1 = document.getElementById("marquee1"); var marquee2 = document.getElementById("marquee2"); marquee2.innerHTML = marquee1.innerHTML; function marqueeImpl(){document.getElementById("result").innerHTML = "marquee2.offsetTop: " + marquee2.offsetTop +" marquee.scrollTop:"+marquee.scrollTop;//之後發現，這種方式不相容所有的瀏覽器，比如ie6 ie7 和搜狗，他們擷取的offsetTop 參照物不是父級容器，而是瀏覽器最外層 ，所以需要額外判斷瀏覽器是ie6 ie7還是搜狗。if(navigator.userAgent.toLowerCase().indexOf("metasr")!=-1 || (browser=="Microsoft Internet Explorer" && (trim_Version=="MSIE7.0" || trim_Version=="MSIE6.0"))){if(marquee2.offsetTop - marquee.scrollTop <= 0) {marquee.scrollTop -= marquee1.offsetHeight;}else{ marquee.scrollTop++;} }else{if(marquee2.offsetTop - marquee.offsetTop - marquee.scrollTop <= 0) {marquee.scrollTop -= marquee1.offsetHeight;}else{ marquee.scrollTop++;} }}var marqueeVal = setInterval(marqueeImpl, speed);marquee.onmouseover = function() {clearInterval(marqueeVal);} marquee.onmouseout = function() {marqueeVal = setInterval(marqueeImpl, speed);} </script> </body></html>
文字列表無縫橫向滾動代碼：
<!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=gb2312" /> <title>JavaScript實現文字列表無縫向上滾動</title> <style> /*全域設定*/ *{margin:0px;padding:0px;border:0px;} body{font-size:12px;} #marquee{overflow:hidden;height:100px;width:280px; margin:50px auto;} #marquee1{height:auto;} #marquee1 li{height:22px;} #marquee2{height:auto;} #marquee2 li{height:22px;} #result{width:300px;margin:10px auto;} </style> </head> <body> <!-- 其實實現原理很簡單，marquee1 和marquee2 innerHTML 是一樣的嘛 ，假如marquee的scrollTop++ ,那麼只有marquee在往下移。恰好超過的部分隱藏，就感覺marquee沒有動，而是marquee1和marquee2他們向上移動，但是實際上他們從來沒有變過，關鍵就在於當marquee 的頂部已經到達marquee1 的底部的時候，立馬將marquee的scrollTop位置還原成初始狀態，這樣子就感覺 兩個div一直在滾個不停 --> <div id="marquee"> <div id="marquee1"> <ul> <li><a href="#" >微軟大會2012購票享7折優惠</a></li> <li><a href="#" >微軟Silverlight 5開發書籍匯總</a></li> <li><a href="#" >實現.Net代碼產生器討論帖</a></li> <li><a href="#" >探討查看SQL變更記錄的方法</a></li> <li><a href="#" >魏子鈞：HTML5和JavaScript將長存</a></li> <li><a href="#" >Hadoop&BigData 技術贏門票活動</a></li> <li><a href="#" >Hadoop與大資料精彩議題發布</a></li> <li><a href="#" >Cloud Foundry徵文大賽進行中</a></li> </ul> </div> <div id="marquee2"></div> </div> <div id="result"></div> <script> var speed=100; var marquee = document.getElementById("marquee"); var marquee1 = document.getElementById("marquee1"); var marquee2 = document.getElementById("marquee2"); marquee2.innerHTML = marquee1.innerHTML; function marqueeImpl(){ document.getElementById("result").innerHTML = "marquee2.offsetTop: " + marquee2.offsetTop +" marquee.scrollTop:"+marquee.scrollTop; if(marquee2.offsetTop - marquee.offsetTop - marquee.scrollTop <= 0) { marquee.scrollTop -= marquee1.offsetHeight; }else{ marquee.scrollTop++; } } var marqueeVal = setInterval(marqueeImpl, speed); marquee.onmouseover = function() { clearInterval(marqueeVal); } marquee.onmouseout = function() { marqueeVal = setInterval(marqueeImpl, speed); } </script> <!--向左邊無縫滾動--><style type="text/css">#marquee_1{ overflow:hidden; width:815px;height:30px;}#marquee_1 #marquee1_1 {width:200%; height:30px;}#marquee_1 ul{float:left; height:30px; }#marquee_1 ul li{float:left; line-height:30px;}#marquee_1 li a{margin-right:30px;color:#444444;}</style><div id="marquee_1"><div id="marquee1_1"> <ul> <li><a href="#" >資源回收筒裡的檔案刪除了怎麼恢複</a></li><li><a href="#" >c盤哪些檔案可以刪除 系統就越來越慢怎麼辦</a></li><li><a href="#" >電腦IME切換不了怎麼辦</a></li><li><a href="#" >PC是什麼意思 </a></li><li><a href="#" >註冊表怎麼開啟 電腦註冊表在哪裡開啟</a></li><li><a href="#" >什麼瀏覽器速度最快 什麼瀏覽器最安全</a></li><li><a href="#" >1m等於多少kb 1MB等於多少KB</a></li><li><a href="#" >ppap.exe是什麼進程</a></li> </ul> </div> <div id="marquee2_1"></div> </div><script type="text/javascript">var marquee_1 = document.getElementById("marquee_1");var marquee1_1 = document.getElementById("marquee1_1");var marquee2_1 = document.getElementById("marquee2_1");marquee2_1.innerHTML=document.getElementById("marquee1_1").innerHTML;function marqueeImpl_1(){if(marquee_1.scrollLeft-marquee2_1.offsetWidth>=0){ marquee_1.scrollLeft-=marquee1_1.offsetWidth;}else{ marquee_1.scrollLeft++;}}var marqueeVal_1=setInterval(marqueeImpl_1,speed);marquee_1.onmouseover=function(){clearInterval(marqueeVal_1);}marquee_1.onmouseout=function (){marqueeVal_1=setInterval(marqueeImpl_1,speed);}</script></body> </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
