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开发时的五个注意事项
Dec 08 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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 301转向实现代码
2008/09/18 PHP
php建立Ftp连接的方法
2015/03/07 PHP
php实现的验证码文件类实例
2015/06/18 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Python列表推导式与生成器用法分析
2018/08/02 Python
django使用LDAP验证的方法示例
2018/12/10 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
技术总监管理职责范本
2014/03/06 职场文书
2014年教师节活动总结
2014/08/29 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
Python实现滑雪小游戏
2021/09/25 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers