JavaScript实现多个物体同时运动


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了JavaScript实现多个物体同时运动的具体代码,供大家参考,具体内容如下

1、多个物体同时运动

 ---例子:多个Div,鼠标移入变宽
  单定时器,存在问题
  每个Div一个定时器

2、多物体运动框架

定时器作为物体的属性
参数的传递:物体、目标值
    ---例子:多个Div淡入淡出
   所有东西都不能公用
   属性与运动对象绑定
:速度、其他属性值(如透明度等)

3、多个Div,鼠标移入变宽的例子

3.1 代码

<head>
 <meta charset="UTF-8">
 <title>多物体运动框架</title>
 <style type="text/css">
 div {
 width: 100px;
 height: 50px;
 background: red;
 margin-top: 50px;
 }
 </style>
 <script type="text/javascript">
 window.onload = function() {
  //获取元素
  var aDiv = document.getElementsByTagName("div");
  for (var i = 0; i < aDiv.length; i++) {
  aDiv[i].onmousemove = function() {
  startMove(this, 300);
  }
  aDiv[i].onmouseout = function() {
  startMove(this, 100);
  }
  }
 }
 //运动函数
 function startMove(obj, iTarget) {
 //清楚定时器函数
 //由于是是适应于多个对象的变化,所以每个DIV有一个定时器
 clearInterval(obj.timer);
 //定时器函数
 //每一个对象,有一个定时器
 obj.timer = setInterval(function() {
  //记录速度
  var iSpeed = (iTarget - obj.offsetWidth) / 5;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  //运动和停止的判断条件
  if (obj.offsetWidth == iTarget) {
  //清楚定时器函数
  clearInterval(obj.timer);
  } else {
  obj.style.width = obj.offsetWidth + iSpeed + 'px';
  }
 }, 30);
 }
 </script>
 </head>
 
 <body>
 <div></div>
 <div></div>
 <div></div>
</body>

3.2 多个DIV淡入淡出的例子

<head>
 <meta charset="UTF-8">
 <title>多物体运动框架</title>
 <style type="text/css">
 div {
 width: 100px;
 height: 100px;
 background: red;
 margin-top: 50px;
 filter: alpha(opacity: 30);
 opacity: 0.3;
 }
 </style>
 <script type="text/javascript">
 window.onload = function() {
  //获取元素
  var aDiv = document.getElementsByTagName("div");
  for (var i = 0; i < aDiv.length; i++) {
  //将alpha作为,物体的一个属性
  aDiv[i].alpha = 30;
  aDiv[i].onmousemove = function() {
  startMove(this, 100);
  }
  aDiv[i].onmouseout = function() {
  startMove(this, 30);
  }
  }
 }
 //运动函数
 function startMove(obj, iTarget) {
 //清楚定时器函数
 clearInterval(obj.timer);
 //定时器函数
 obj.timer = setInterval(function() {
  //记录速度
  var iSpeed = (iTarget - obj.alpha) / 8;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  //运动和停止的判断条件
  if (obj.alpha == iTarget) {
  //清楚定时器函数
  clearInterval(obj.timer);
  } else {
  obj.alpha += iSpeed;
  obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
  obj.style.opacity = obj.alpha / 100;
  }
 }, 30);
 }
 </script>
 </head>
 
 <body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
javascript时区函数介绍
Sep 14 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
JS判断数组那点事
Oct 10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
基于javascript实现碰撞检测
Mar 12 #Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 #Javascript
javascript实现拖拽碰撞检测
Mar 12 #Javascript
原生js实现碰撞检测
Mar 12 #Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 #Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 #Javascript
You might like
php读取html并截取字符串的简单代码
2009/11/30 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
详解Python 函数如何重载?
2019/04/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
八一建军节部队活动方案
2014/02/04 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
表彰大会策划方案
2014/05/13 职场文书
行政监察建议书
2014/05/19 职场文书
化学教育专业求职信
2014/07/08 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
经济纠纷起诉状
2015/05/20 职场文书
院系推荐意见
2015/06/05 职场文书
现实表现证明材料
2015/06/19 职场文书
战友聚会致辞
2015/07/28 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
python实现简单的井字棋
2021/05/26 Python