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 相关文章推荐
js验证表单大全
Nov 25 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
退休教师欢送会主持词
2014/03/31 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
外贸英文求职信范文
2015/03/19 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python