JS实现间歇滚动的运动效果实例
程序员文章站
2023-09-29 09:46:17
本文实例讲述了js实现间歇滚动的运动效果。分享给大家供大家参考，具体如下：
本文实例讲述了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>
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： php旋转图片90度的方法
下一篇： 深入理解jquery中extend的实现