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 相关文章推荐
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Vue.js对象转换实例
Jun 07 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
简单易用的计数器(数据库)
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
可输入的下拉框
2006/06/19 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
移动节点的jquery代码
2014/01/13 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python实时获取cmd的输出
2015/12/13 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
房地产营销策划方案
2014/02/08 职场文书
廉洁自律承诺书
2014/03/27 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python