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 相关文章推荐
Javascript实现的鼠标经过时播放声音
May 18 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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实现框架(一)
2006/10/09 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
Prototype Object对象 学习
2009/07/12 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
Python中的异常处理简明介绍
2015/04/13 Python
详解python基础之while循环及if判断
2017/08/24 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
通过代码实例了解Python sys模块
2020/09/14 Python
创业计划书如何吸引他人眼球
2014/01/10 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
社区十八大感言
2014/01/19 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
邀请函的格式
2015/01/30 职场文书
运动会致辞稿
2015/07/29 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL