JavaScript缓冲运动实现方法(2则示例)


Posted in Javascript onJanuary 08, 2016

本文实例讲述了JavaScript缓冲运动实现方法。分享给大家供大家参考,具体如下:

实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比)

(500 - oDiv.offsetLeft) / 7 = iSpeed;

需要注意:当计算出来的速度有小数时需要取整;

(500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

例子1:滑块缓冲运动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetLeft)/8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iTarget==obj.offsetLeft){
   clearInterval(timer);
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="移动" />
<div id="div1"></div>
<span></span>
</body>
</html>

例子2:侧边栏滑动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏滑动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
<script>
window.onload = window.onscroll = function()
{
 var oDiv = document.getElementById('div1');
 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var clientHeight = document.documentElement.clientHeight;
 var iH = (clientHeight - oDiv.offsetHeight)/2 + iScrollTop;
 //oDiv.style.top = iH + 'px';
 startMove(oDiv, parseInt(iH));
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetTop) / 8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(obj.offsetTop == iTarget){
   clearInterval(timer);
  }else{
   obj.style.top = obj.offsetTop + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

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

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
Python生成不重复随机值的方法
2015/05/11 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Python3多线程基础知识点
2019/02/19 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
PyQt实现计数器的方法示例
2021/01/18 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
如何查找网页漏洞
2016/06/22 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android