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 function定义函数的几种不错方法
Feb 27 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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(3) php 函数
2010/02/15 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
JS获取几种URL地址的方法小结
2014/02/26 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Angular实现表单验证功能
2017/11/13 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
原生js实现购物车
2020/09/23 Javascript
Python爬取附近餐馆信息代码示例
2017/12/09 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python对html过滤处理的方法
2018/10/21 Python
Django REST framework视图的用法
2019/01/16 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
应届护士推荐信
2013/11/16 职场文书
党员培训思想汇报
2014/01/07 职场文书
消防工作实施方案
2014/06/09 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
python状态机transitions库详解
2021/06/02 Python
详解Vue slot插槽
2021/11/20 Vue.js