JS實現文字圖片無縫滾動

時間 2019-12-05

原文原文鏈接

今天作項目遇到一個滾動的效果，原本打算用marquee作的，由於它是html自帶的標籤，寫起來簡單，可是有一個問題就是marquee不能實現無縫滾動，上網找了一些方法，發現marquee能夠實現無縫，但要在腦殘的IE環境下。css

沒辦法，爲了達到要求，本身又從網上找了一些相關的代碼加以修改，最終實現了效果，如今把代碼分享給你們，有問題還請你們多指正。html

代碼以下：ui

<!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" />
<title>文字列表無縫向上滾動JavaScript代碼</title>
<style type="text/css">
#xunhuan{
overflow:hidden; /*溢出的部分不顯示*/
height:100px;
}
#xunhuan1,#xunhuan2{height: auto;}
</style>
</head>
<body>
       <div id="xunhuan">
                   <div id="xunhuan1">
                     <ul>
                         <li>這是第1條</li>
                         <li>這是第2條</li>
                         <li>這是第3條</li>
                         <li>這是第4條</li>
                         <li>這是第5條</li>
                         <li>這是第6條</li>
                     </ul>    
                 </div>
                 <div id="xunhuan2"></div>
            </div>
<script> 
var speed=10; //數字越大速度越慢
var tab=document.getElementById("xunhuan");
var tab1=document.getElementById("xunhuan1");
var tab2=document.getElementById("xunhuan2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1爲demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//當滾動至demo1與demo2交界時
tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠標移上時清除定時器達到滾動中止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標移開時重設定時器
</script> 
</body>
</html>

這裏面須要注意的是，要加上我在style裏面寫的樣式，另外兩個注意點就是：裏面的li不能float，最外圍的xunhuan的高度要小於裏面元素的高度，以足夠它循環滾動。spa

例子是向上滾動的效果，若是想要向左滾動，作相應的改動便可。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。