js多个物体运动功能实例分析


Posted in Javascript onDecember 20, 2016

本文实例分析了js实现的多个物体运动功能。分享给大家供大家参考,具体如下:

js多个物体运动功能实例分析

与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj。另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳

window.onload=function(){
  var aDiv=document.getElementsByTagName("div");
  var timer=null;
  var i;
  for(i=0;i<aDiv.length;i++){
    aDiv[i].timer=null;
    aDiv[i].onmouseover=function(){
      startMove(this,300);
    };
    aDiv[i].onmouseout=function(){
      startMove(this,100);
    };
  }
  function startMove(obj,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      var iSpeed=(iTarget-obj.offsetWidth)/8;
      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);
  };
};

注:多物体运动,所有东西都不能公用

属性与运动对象绑定:速度、其他属性值(如透明度等)

offsetWidth、offsetHeight、offsetLeft、offsetHeight都有一个bug,拿offsetWidth举例,他除了width还包括padding和border,比如div宽度为100,还有一像素边框,现在让div运动,div.style.width=div.offsetWidth-1+'px',没有边框的的情况下他会一直缩小直到消失,有边框的情况。width:100px,offsetWidth:102px >>>>>width:101px,offsetWidth:103px,会使得他不断变大

解决办法:

用 currentStyle  div.style.width=parseInt(getStyle(div,'width'))-1+'px'   getStyle是自己封装好的获取样式的函数,里面包括currentStyle方法。parseInt解析字符串返回整数。

扩展(任意值变化):

用同一套运动框架使得一个物体变宽,一个变高,一一个透明度变化

window.onload=function(){
  var aDiv=document.getElementsByTagName("div");
  var timer=null;
  aDiv[0].onmouseover=function(){
    startMove(this,'width',300);
  };
  aDiv[0].onmouseout=function(){
    startMove(this,'width',100);
  };
  function getStyle(obj,attr){
    if(obj.currentStyle){
      return obj.currentStyle[attr];
    }
    else{
      return getComputedStyle(obj,false)[attr];
    }
  };
  function startMove(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      var iCur=parseInt(getStyle(obj,attr));
      var iSpeed=(iTarget-iCur)/8;
      iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);  //凡是要用缓冲运动,肯定缺不了取整,为了让他能到目的点(不然无法完全贴合)
      if(iCur==iTarget){
        clearInterval(obj.timer);
      }
      else{
        obj.style[attr]=iCur+iSpeed+'px';
      }
    },30);
  };
};

这套运动框架还有个问题,透明度没支持

1.

var iCur=parseInt(getStyle(obj,attr));

opacity取到的都是零点几,parseInt取整,所以opacity永远是0,应改为

if(attr=='opacity'){
  var iCur=parseFloat(getStyle(obj,attr))*100;  //为了其他程序不用修改,这里统一乘100
}
else{
  var iCur=parseInt(getStyle(obj,attr));
}

2.

obj.style[attr]=iCur+iSpeed+'px';

按现在写法就是

aDiv.style.opacity=50px;

应改为

if(attr=='opacity'){
  obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
  obj.style.opacity=(iCur+iSpeed)/100;
}
else{
  obj.style[attr]=iCur+iSpeed+'px'
}

3.计算机内部,都是模拟的来存储小数,不是实际来存储,最简单的例子

alert(0.07*100);  //输出并不是7,而是7.0000...001,不止7,很多数字(小数)都有问题

所以var iCur=parseFloat(getStyle(obj,attr))*100;就会出问题(会闪烁),解决方法就是避免使用小数

var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);

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

Javascript 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
JS高级运动实例分析
Dec 20 #Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 #Javascript
jQuery常见的选择器及用法介绍
Dec 20 #Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 #Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 #Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 #Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
jQuery入门知识简介
2010/03/04 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
创建Django项目图文实例详解
2019/06/06 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
搞笑创意广告语
2014/03/17 职场文书
保护环境倡议书
2014/04/14 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL