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 AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
js实现微信聊天效果
Aug 09 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写的小东西
2006/12/06 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php生成静态页面的简单示例
2014/04/17 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python快速排序代码实例
2013/11/21 Python
python基础教程之自定义函数介绍
2014/08/29 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python实现文本界面网络聊天室
2018/12/12 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
研讨会主持词
2014/04/02 职场文书
中国梦读书活动总结
2014/07/10 职场文书
委托公证书格式
2015/01/26 职场文书
信息技术研修心得体会
2016/01/08 职场文书