JavaScript 時間間隔和暫停及scrollleft的簡單應用
阿新 • • 發佈:2019-02-15
<該應用的效果是:一箇中間數字連續增加的span文字(可以更換成圖片)在介面中左右無間斷連續橫移,到了介面左邊則向右橫移,到了介面右邊則向做橫移>
<文中使用了scrollLeft 屬性:該屬性是滾動條距離介面左邊的距離>
<html> |
<head> |
<title>飄來飄去</title> |
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!--此處定義移動的div塊的相關屬性--> |
<style> |
#sp1{ |
display: inline-block; |
border: 1px solid red; |
font-size: 20px; |
width: 80px; |
height: 30px; |
text-align: center; |
background-color: lightblue; |
} |
</style> |
<style> <!--此處定義此處定義橫移元素所在的外層、裡層div塊的相關屬性--> |
#outer{ |
overflow:hidden; width:100%;margin:20px auto;height:100%; |
} |
#inner{ |
height:100%;width:100%;margin: 0px 0px 0px 1360px; |
} |
</style> |
<script> <!--定義2個變數來接收暫停ID--> |
var intervalid,intervalid1; <!--編寫向左橫移函式(其作用是使平移元素向左橫移,到了外層div塊最左邊則向右橫移)--> |
function moveleft(){ |
if(document.getElementById("outer").scrollLeft<=1350){ |
document.getElementById("outer").scrollLeft+=3; |
}else{ |
clearInterval(intervalid); |
intervalid1 = setInterval(moveright,20); |
} |
} <!--編寫向右橫移函式(其作用是使平移元素向右橫移,到了外層div塊最左邊則向左橫移)--> |
function moveright(){ |
if(document.getElementById("outer").scrollLeft>=100){ |
document.getElementById("outer").scrollLeft-=3; |
}else{ |
clearInterval(intervalid1); |
intervalid = setInterval(moveleft,20); |
} |
} <!--該函式是使元素中數字不斷增加的函式--> |
function start(){ |
var sp1 = document.getElementById("sp1"); |
sp1.innerHTML = parseInt(sp1.innerHTML)+1+"px"; |
} |
intervalid = setInterval(moveleft,20); |
setInterval(start,1000); |
</script> |
</head> |
<body> |
<div id="outer"> |
<div id="inner"> |
<span id="sp1">0px</span><br/> |
</div> |
</div> |
</body> |
</html> |