为什么实施不了链式运动?

来源:6-2 完美运动框架

哈哈哈蜜瓜

2016-10-03 20:55

window.onload = function () {
   var omove = document.getElementById("main");
   var alist = document.getElementsByTagName("a");
   for(var i=0;i<alist.length;i++){
       alist[i].onmouseover = function(){
           var _this =this.getElementsByTagName("i")[0];
           startMove(_this,{top:-25,opacity:0},function(){
               startMove(_this,{top:25,opacity:1});
           });
       }
   }
}

function getStyle(obj,attr){
   if(obj.currentStyle){
       return  obj.currentStyle[attr];
   }else{
       return getComputedStyle(obj,false)[attr];
   }
}
function startMove(obj,json,fn) {
   var flag = true;
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
       for(var attr in json) {
           //1、取当前的值
           var iucr = 0;
           if (attr == 'opacity') {
               icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
           } else {
               icur = parseInt(getStyle(obj, attr));
           }
           //2、算速度
           var speed = (json[attr] - icur) / 8;
           speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
           //3、检测停止
           if (icur !=json[attr]) {
               flag = false;
           }
           if (attr == 'opacity') {
               obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
               obj.style.opacity = (icur + speed) / 100;
           } else {
               obj.style[attr] = icur + speed + 'px';
           }
       }
       if(flag){
           clearInterval(obj.timer);
           if(fn){
               fn();
           }
       }
   },30);
}

写回答 关注

2回答

  • 小钊钊
    2016-10-12 21:27:57

    亲测,将flag立在timer里面就好了

  • 青春不是年华而是心境
    2016-10-04 10:39:18

    你把var flag = true;放到obj.timer = setInterval(function () 的下边试试

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题