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 相关文章推荐
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
javascript实现yield的方法
Nov 06 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
JS前端笔试题分析
Dec 19 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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
用PHP发电子邮件
2006/10/09 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
use jscript List Installed Software
2007/06/11 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python统计日志ip访问数的方法
2015/07/06 Python
python简单文本处理的方法
2015/07/10 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
四好少年事迹材料
2014/01/12 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
学前班语言教学计划
2015/01/20 职场文书
实习单位推荐信
2015/03/27 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python