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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
vue回到顶部监听滚动事件详解
Aug 02 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 while循环得到循环次数
2013/10/26 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python 从远程服务器下载东西的代码
2013/02/10 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python中作用域的深入讲解
2018/12/10 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python-for循环的内部机制
2020/06/12 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
大学生简历中个人的自我评价
2013/10/06 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
校园文明倡议书
2014/05/16 职场文书
大学生求职信怎么写
2015/03/19 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL