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下拉框内容左右移动效果的具体实现
Jul 10 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python中 map()函数的用法详解
2018/07/10 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Python利用命名空间解析XML文档
2020/08/10 Python
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
家长写给老师的建议书
2014/03/13 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL