Question

我正在寻找一些我一直在努力的脚本的帮助。这是我的文件fade.js 问题在于变化，它搞砸了。请帮我找到问题和解决方案，谢谢。

JS-文件

//image fade script
var opacity = 0;
function changeimg(currentimage){

rnumb = Math.floor(Math.random()*2);
var newimage = "./images/" + rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fadeImg").src= newimage;
}


}
function fadein()
{
       var fadeImg = document.getElementById('fadeImg');

       var browserName=navigator.appName;

       if(browserName=="Microsoft Internet Explorer")
       {

              browserOpacity = opacity / 10;

              fadeImg.filters.alpha.opacity = browserOpacity;

       }
       else
       {

              browserOpacity = opacity / 1000;

              fadeImg.style.opacity = browserOpacity;

       }

       if(opacity < 1000)
       {

              initiate();

       }
else if(opacity == 1000)
{
changeimg(document.getElementById("fadeImg").src);
opacity = 0;
}

}


function initiate()
{

       opacity++;
       setInterval("fadein()", 500);

}

的index.html

<script type="text/javascript" src="fade.js"></script>
<body onload="initiate()">
<img id="fadeImg" src="images/1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>

JS-拨弄

以下是代码的小提琴：http://jsfiddle.net/epqKr/2/（请注意，代码，因为它在小提琴中，可能会使您的浏览器在一段时间后冻结。

Answer 1

我认为你应该使用cross-browser library来完成这样的事情。 Microsoft Internet Explorer，特别是在版本＆lt; 9，最有可能不表现正如您所期望的那样，特别是当您尝试使用利用不透明度，alpha滤镜和时序的函数时。您可以尝试使用jQuery, or Prototype, or MooTools和此类框架。他们都以简单，安全，更好的方式制作出您想要的东西。

Answer 2

请勿在{{1}}函数中调用initiate()，而只需增加不透明度控制变量（即fadeIn()）。
您可能希望保存setInterval返回值，以便在完成动画后终止回调。
您可能还希望通过降低间隔来提高动画速度。

opacity += 1;;

Answer 3

我正在研究这个问题，这就是我现在所拥有的：它不起作用，但看起来更好。 HTML

<html>
<head>

<script type="text/javascript" src="fade1.js"></script>

</head>

<body onload="fadetimer()">
<img id="fadeImg" src="1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>

</body>
</html>

脚本

    //image fade script
var opacity = 0;

function changeimg(currentimage){

rnumb = Math.floor(Math.random()*2);
var newimage = rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fade").src= newimage;
}

}
function fadein()
{
       var fade = document.getElementById('fade');

if(fade.filters.alpha.opacity >= 100 || fade.style.opacity >= 1.0)
{

changeimg(fade.src);
fade.filters.alpha.opacity = 0;
fade.style.opacity = 0;

} 
else 
{
              fade.filters.alpha.opacity += 10;
              fade.style.opacity += 0.1;

       }


}


function fadetimer()
{
setInterval("fadein()", 500);
}

javascript使用计时器和不透明度逐渐淡化图像

3 个答案: