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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
js创建对象的方式总结
Jan 10 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue微信分享插件使用方法详解
Feb 18 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
客房主管岗位职责
2013/12/09 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
党校学习党性分析材料
2014/12/19 职场文书
居安思危观后感
2015/06/11 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis