JS高级运动实例分析


Posted in Javascript onDecember 20, 2016

本文实例分析了JS高级运动。分享给大家供大家参考,具体如下:

一、链式运动框架

1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数)

多物体运动框架改为如下:

function startMove(obj,attr,iTarget,fn){
...
  if(iCur==iTarget){
    clearInterval(obj.timer);
    fn();
  }...
};

然后就可以用它,比如先变宽再变高最后变透明度

startMove(this,'width',300,function(){
  startMove(this,'height',300,function(){
    startMove(this,'opacity',100);
  });
});

二、完美运动框架

1.原本多物体运动框架的缺陷

比如要让他宽度高度同时变300,这样写:

startMove(this,'width',300);
startMove(this,'height',300);

问题:只有高度变300了(因为宽度准备运动时会开一个定时器,这个定时器还没开始运动前,执行高度变化的运动,就把之前的定时器关了)

2.for in

for(i=0;i<=arr.length;i++)和for(i in arr)效果一样

①什么时候用for什么时候用for...in呢?

数组:两个都可以用   Json:只能用for...in(因为Json下标没有规律,没有length可言)

对数组而言for...in循环不灵活,因为for循环可以从1可以从2等等任意数字开始,而for...in一循环就全部

②for in小应用

function setStyle(obj,attr,value){
  obj.style[attr]=value;
};
setStyle(oDiv,'width','300px');
setStyle(oDiv,'height','300px');
setStyle(oDiv,'background','green');

=====>

function setStyle(obj,json){
  var attr='';
  for(attr in json){
    obj.style[attr]=json[attr];
  }
};
setStyle(oDiv,{width:'300px',height:'300px',background:'green'});

③多物体运动框架改进

function startMove(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    for(var attr in json){
   if(attr=='opacity'){
        var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
      }
      else{
        var iCur=parseInt(getStyle(obj,attr));
      }
      var iSpeed=(json[attr]-iCur)/8;
      iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
      if(iCur==json[attr]){
        clearInterval(obj.timer);
        if(fn){
         fn();  //有传函数这个参数才执行,不然会出错
        }
      }
      else{
        if(attr=='opacity'){
          obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
          obj.style.opacity=(iCur+iSpeed)/100;
        }
        else{
          obj.style[attr]=iCur+iSpeed+'px'
        }
      }
    }
  },30);
};

这样还有个问题

if(iCur==json[attr]){
  clearInterval(obj.timer);
}

只要json里有任一值到达目标,计时器就停止

比如我让宽度变到103,高度变到300,那高度到不了300就停止了

解决方案

function startMove(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    var bStop=true;  //先定义一个值,假设所有值都到了
    for(var attr in json){
   if(attr=='opacity'){
        var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
      }
      else{
        var iCur=parseInt(getStyle(obj,attr));
      }
      var iSpeed=(json[attr]-iCur)/8;
      iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
      if(iCur!=json[attr]){
        bStop=false;    //并不是所有值都到了,就把bStop设成 false
      }
      if(attr=='opacity'){
        obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
        obj.style.opacity=(iCur+iSpeed)/100;
      }
      else{
        obj.style[attr]=iCur+iSpeed+'px'
      }
    }
    if(bStop){    //所有值都到了,关闭定时器
      clearInterval(obj.timer);
      if(fn){
        fn();  //有传函数这个参数才执行,不然会出错
      }
    }
  },30);
};

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

Javascript 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
新手入门js闭包学习过程解析
Oct 08 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
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
You might like
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
js字符编码函数区别分析
2011/12/28 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
个人简历自我评价范文
2014/02/04 职场文书
迟到检讨书500字
2014/02/05 职场文书
班主任开场白
2015/06/01 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
表扬信范文
2019/04/22 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers