Question

这是我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fading JavaScript Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">

 var fadeEffect=function(){
return{
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.si = setInterval(function(){fadeEffect.tween()}, 30);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value

        }
    }
}
}();

var fadeEffect2=function(){
return{
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.si = setInterval(function(){fadeEffect2.tween()}, 30);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value

        }
    }
}
 }();
var fadeEffect3=function(){
return{
    init:function(id, flag, target){
        this.elem = document.getElementById(id);
        clearInterval(this.elem.si);
        this.target = target ? target : flag ? 100 : 0;
        this.flag = flag || -1;
        this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
        this.si = setInterval(function(){fadeEffect3.tween()}, 30);
    },
    tween:function(){
        if(this.alpha == this.target){
            clearInterval(this.si);
        }else{
            var value = Math.round(this.alpha + ((this.target - this.alpha) * .07)) + (1 * this.flag);
            this.elem.style.opacity = value / 100;
            this.elem.style.filter = 'alpha(opacity=' + value + ')';
            this.alpha = value

        }
    }
}
}();


</script>

</head>
<body>

<div id="wrapper">
<div id="fade"></div>

<div id="fade1"></div>

<div id="fade2">
<div class="link"> <a href="http://www.your_link.com" style="display:block; height:100%;    width:100%;"></a></div>

</div>

</div>

<div class="button" onclick="fadeEffect.init('fade', 1);fadeEffect2.init('fade1',0);fadeEffect3.init('fade2',0);myFunction()">pic 1</div>
<div class="button" onclick="fadeEffect.init('fade',0);fadeEffect2.init('fade1',1);fadeEffect3.init('fade2',0)">pic 2</div>
<div class="button" onclick="fadeEffect.init('fade',0);fadeEffect2.init('fade1',0);fadeEffect3.init('fade2',1)">pic 3</div>

</body>
</html>

我是javascript的新手。我可以使用按钮淡化图像，但我希望它在未受影响时使用计时器自动淡入淡出。或者如果有更简单的方法可以做到这一点，我会很感激。

Answer 1

是。您应该使用setTimeout函数。该用法与您已使用的setInterval函数非常相似。区别在于Interval每X秒做一次，而这只是一个电话（对不起，如果我对这个解释太“呃”）。

setTimeout(function () {
    //here you fade out whatever you want
}, 3000); //the 3000 means milliseconds, so 3 seconds.

我如何添加一个计时器淡入淡出javascript让它自动运行？

1 个答案: