JS实现间歇滚动的运动效果实例

来源：动视网责编：小采时间：2020-11-27 20:28:02

JS实现间歇滚动的运动效果实例

JS实现间歇滚动的运动效果实例:本文实例讲述了JS实现间歇滚动的运动效果。分享给大家供大家参考，具体如下：<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" />

推荐度：

点击下载本文 文档为doc格式

导读JS实现间歇滚动的运动效果实例:本文实例讲述了JS实现间歇滚动的运动效果。分享给大家供大家参考，具体如下：<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" />

本文实例讲述了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>

JS实现间歇滚动的运动效果实例

推荐度：

点击下载本文 文档为doc格式

标签：实现滚动 js

热门焦点

JS实现间歇滚动的运动效果实例

JS实现间歇滚动的运动效果实例

JS实现间歇滚动的运动效果实例

最新推荐

猜你喜欢

热门推荐