源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS高级运动实例分析

  • 时间:2022-05-02 18:41 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS高级运动实例分析
本文实例分析了JS高级运动。分享给大家供大家参考,具体如下: [b]一、链式运动框架[/b] 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);
  });
});

[b]二、完美运动框架[/b] 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相关内容感兴趣的读者可查看本站专题:《[url=http://www.1sucai.cn/Special/418.htm]JavaScript运动效果与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/502.htm]JavaScript切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/462.htm]JavaScript动画特效与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》 希望本文所述对大家JavaScript程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部