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 计算图片加载数量的代码
Jan 01 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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实现文件上传与下载实例与总结
2016/03/13 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
浅析javascript 定时器
2014/12/23 Javascript
js表头排序实现方法
2015/01/16 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python实现ftp文件传输功能
2020/03/20 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
P/Invoke是什么
2015/07/31 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
写好自荐信的要点
2013/11/06 职场文书
顶岗实习计划书
2014/01/10 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
学校卫生检查制度
2014/02/03 职场文书
金融管理应届生求职信
2014/02/20 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书