主页 / 网络编程 /

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

网络编程 2021-07-04 19:19www.168986.cn编程入门
这篇文章主要介绍了JS实现间歇滚动的运动效果,涉及javascript定时器触发动态改变页面元素的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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>c</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].offsetHeightoli.length)/2){
  odiv.scrollTop=0;
  iNow=0;
 }else{
 var get=oli[0].offsetHeightiNow;
 move(odiv,get); //运动框架
 }
},2000);
}
star();
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery插件DataTable使用方法详解(.Net平台) 下一篇：javascript-解决mongoose数据查询的异步操作

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by