JS實現間歇滾動的運動效果實例
- 巴扎黑原創
- 2016-12-22 13:29:111362瀏覽
本文實例講述了JS實現間歇滾動的運動效果。分享給大家參考，如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#luanbo{border:1px solid red;overflow:hidden;height:24px;}
#info li{height:24px;line-height:24px;}
</style>
<body>
<div id="luanbo">
<ul id="info">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
<li>ccccccccccc</li>
<li>ddddddddddd</li>
<li>eeeeeeeeeee</li>
<li>fffffffffff</li>
</ul>
</div>
<script type="text/javascript">
var odiv=document.getElementById("luanbo");
var oul=document.getElementById("info");
var oli=document.getElementById("info").getElementsByTagName("li");
var iNow=0;
function move(obj,tg){ //运动框架
clearInterval(dt);
var dt=setInterval(function(){
var speed=2;
if(tg-obj.scrollTop<speed){
tg=obj.scrollTop;
clearInterval(dt);
}else{
obj.scrollTop+=speed;
}
},30);
}
oul.innerHTML+=oul.innerHTML;
function star(){
clearInterval(tm);
var tm=setInterval(function(){
iNow++;
if(odiv.scrollTop>=(oli[0].offsetHeight*oli.length)/2){
odiv.scrollTop=0;
iNow=0;
}else{
var get=oli[0].offsetHeight*iNow;
move(odiv,get); //运动框架
}
},2000);
}
star();
</script>
</body>
</html>陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn