这段代码为什么实现不了

来源:4-1 JS多物体动画

甫里

2016-04-17 16:37


window.onload=ChangeColor;

function ChangeColor() {

var box=document.getElementsByTagName("div");

for (var i = 0; i < box.length; i++) {

box[i].timer=null;

box[i].alpha=30;

box[i].onmouseover=function(){

ChageAlpha(this,100);

}

box[i].onmouseout=function(){

ChageAlpha(this,30);

}

}

}

function ChageAlpha(obj,iTarget){

  clearInterval(obj.timer);

  obj.timer=setInterval(function(){

  var speed=0;

  if (obj.alpha>iTarget) {

  speed=5;

  }else{

  speed=-5;

  }

  if (obj.alpha==iTarget) {

  clearInterval(obj.timer);

  }else{

  obj.alpha+=speed;

  obj.style.filter='alpha(opacity:'+obj.alpha+')';

  obj.style.opacity=obj.alpha/100;

  }

  },30)


}


写回答 关注

3回答

  • moonie
    2016-04-17 23:22:26
    已采纳
    if (obj.alpha>iTarget) {
      speed=5;
    }else{
      speed=-5;
    }

    你这段有问题吧,mouseover 的时候 obj.alpha 的值为 30 iTarget的值为 100 , speed 取 -5 ,这样的话岂不是透明度一直在减小直到最后消失变为负值

    甫里

    非常感谢!

    2016-04-17 23:50:58

    共 1 条回复 >

  • moonie
    2016-04-17 23:21:29
    if (obj.alpha>iTarget) {
      speed=5;
    }else{
      speed=-5;
    }

    你这段有问题吧,mouseover 的时候 obj.alpha 的值为 30 iTarget的值为 100 , speed 取 -5 ,这样的话岂不是透明度一直在减小直到最后消失变为负值

  • 缄默蜀黍ONE
    2016-04-17 22:39:47

    代码中所有的timer和alpha变量都 未定义!未定义!未定义!重要的事情说三遍!(。・∀・)ノ゙

    还有,下次提问发代码记得选择代码语言,纯文本看着真的不方便(◑▽◐),下面展示代码看着多舒服:

    window.onload = ChangeColor;
    
    function ChangeColor() {
      //定义公有变量timer和alpha
      var timer = null; 
      var alpha = 0;
      //***下面所有的timer和alpha变量都未定义!未定义!未定义!重要的事情说三遍!
      var box=document.getElementsByTagName("div");
      for (var i = 0; i < box.length; i++) {
        box[i].timer=null; 
        box[i].alpha=30;
        box[i].onmouseover=function(){
          ChageAlpha(this,100);
        }
        box[i].onmouseout=function(){
          ChageAlpha(this,30);
        }
      }
    
    }
    
    function ChageAlpha(obj,iTarget){
      clearInterval(obj.timer);
      obj.timer=setInterval(function(){
        var speed=0;
        if (obj.alpha>iTarget) {
          speed=5;
        }else{
          speed=-5;
        }
        if (obj.alpha==iTarget) {
          clearInterval(obj.timer);
        }else{
          obj.alpha+=speed;
          obj.style.filter='alpha(opacity:'+obj.alpha+')';
          obj.style.opacity=obj.alpha/100;
        }
      },30)
    
    }


JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题