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


Posted in Javascript onDecember 22, 2016

本文实例讲述了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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
js获取checkbox值的方法
Jan 28 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 #Javascript
Bootstrap popover用法详解
Dec 22 #Javascript
深入学习jQuery中的data()
Dec 22 #Javascript
读Javascript高性能编程重点笔记
Dec 21 #Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 #Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 #Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js function定义函数使用心得
2010/04/15 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python实现音乐下载器
2018/04/15 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python WEB应用部署的实现方法
2019/01/02 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
党员转正党支部意见
2015/06/02 职场文书
经典祝酒词大全
2015/08/12 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS