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 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
apache rewrite_module模块使用教程
2008/01/10 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php include和require的区别深入解析
2013/06/17 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
载入进度条 效果
2006/07/08 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
浅说js变量
2011/05/25 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
Vue Components 数字键盘的实现
2019/09/18 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python实现简单图片物体标注工具
2019/03/18 Python
超简单使用Python换脸实例
2019/03/27 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
绿色环保演讲稿
2014/05/10 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
校本培训个人总结
2015/02/28 职场文书
教师研修随笔感言
2015/11/18 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
防止web项目中的SQL注入
2021/12/06 MySQL