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 toFixed() 方法
Apr 15 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHPMyAdmin 快速配置方法
2009/05/11 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
JavaScript中的私有成员
2006/09/18 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
javascript 继承实现方法
2009/08/26 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JS跨域问题详解
2014/11/25 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
《值日生》教学反思
2014/02/17 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
服务员岗位职责
2015/02/03 职场文书
安全生产学习心得体会
2016/01/18 职场文书
《灰雀》教学反思
2016/02/19 职场文书