为了账号安全,请及时绑定邮箱和手机立即绑定

这段代码为什么实现不了


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 回答

if (obj.alpha>iTarget) {
  speed=5;
}else{
  speed=-5;
}

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

0 回复 有任何疑惑可以回复我~
#1

甫里 提问者

非常感谢!
2016-04-17 回复 有任何疑惑可以回复我~
if (obj.alpha>iTarget) {
  speed=5;
}else{
  speed=-5;
}

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

0 回复 有任何疑惑可以回复我~

代码中所有的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)

}


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113931    人
  • 解答问题       1443    个

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

进入课程

这段代码为什么实现不了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信