JS多物体实现缓冲运动效果示例


Posted in Javascript onDecember 20, 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>
<body>
<div id="odiv" style="position:absolute;width:200px;height:200px;background:red;left:0;"></div>
<div id="odiv1" style="position:absolute;width:200px;height:200px;background:red;left:0;top:250px;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
var odiv1=document.getElementById('odiv1');
odiv.onclick=function(){move(odiv,500);}
odiv1.onclick=function(){move(odiv1,500);}
function move(obj,target){
  clearInterval(dt);
var dt=setInterval(function(){
var ol=parseInt(obj.style.left);
  if(ol==target){
    clearInterval(dt);
  }else{
var speed=(target-ol)/8;
    speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
    obj.style.left=ol+speed+"px";
  }
  },30);
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
BootStrap 导航条实例代码
May 18 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 #Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 #Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 #Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 #Javascript
js多个物体运动功能实例分析
Dec 20 #Javascript
JS高级运动实例分析
Dec 20 #Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 #Javascript
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Flask数据库迁移简单介绍
2017/10/24 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
pygame实现弹球游戏
2020/04/14 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
个人收入证明范本
2014/01/12 职场文书
《胡杨》教学反思
2014/02/16 职场文书
班级团队活动方案
2014/08/14 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
红高粱观后感
2015/06/10 职场文书
2016党员入党决心书
2015/09/22 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL