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 相关文章推荐
深入理解JavaScript定时机制
Oct 29 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
使用Vue生成动态表单
Nov 26 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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写的简易聊天室代码
2011/06/04 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
validator验证控件使用代码
2010/11/23 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
职称自我鉴定
2013/10/15 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
采购内勤岗位职责
2013/12/10 职场文书
日语求职信范文
2013/12/17 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
商场中秋节活动方案
2014/02/07 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技