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 Select操作大集合
May 26 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
vue构建单页面应用实战
Apr 10 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
vue中activated的用法
2021/01/03 Vue.js
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python 实现A*算法的示例代码
2018/08/13 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python如何调用百度识图api
2020/09/29 Python
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
学校消防安全制度
2014/01/30 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers