JS实现多物体运动的方法详解


Posted in Javascript onJanuary 23, 2018

本文实例分析了JS实现多物体运动的方法。分享给大家供大家参考,具体如下:

基本步骤

1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素,添加事件
3.定义startMove函数,需要两个参数,当前“做运动”的元素,和目标值target

注意问题:在多物体运动中,所有的东西不能公用;

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li'); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步,2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+'px';
        }
      },30);
    }
</script>

问题:

当移入移出速度比较快的时候,就会出现有的li回不到原来的样子,卡在半路了;这是因为所有的li公用了一个定时器造成的;

当鼠标移入第一个li时,调用startMove开启一个定时器;鼠标移除li时,也需要开启一个定时器让li回到原来的位置,li走到半路上,我们移入第二个li,首先会清除定时器,这时候第一个li就卡到半路了。

JS实现多物体运动的方法详解

解决这个问题:让每个li拥有自己的timer去控制他们的变化,在for循环的时候,给每个里定义自己的一个timer

liTags[i].timer = null;// 给每个li都添加一个timer

接着在starMove里面每次用的定时器都是当前li 自己的,就不会互相干扰了。

这里由之前的timer变成了obj.timer (当前对象自己的timer);到这里就没问题了。

完整代码如下:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

加点样式:

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

完整js代码

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        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>

接着在看一个例子:多物体运动-改变透明度

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName('img');
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
      }
    },30);
  }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 #Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 #Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 #Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 #Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
You might like
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
求职简历中自我评价
2014/01/28 职场文书
经销商订货会主持词
2014/03/27 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
2015年酒店工作总结
2015/04/28 职场文书
律师函格式范本
2015/05/27 职场文书
小学教代会开幕词
2016/03/04 职场文书