2

我正在为我一直在研究的这个脚本寻求一些帮助。这是我的文件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);

}

索引.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小提琴

这里也是一个 Fiddle 代码：http: //jsfiddle.net/epqKr/2/（请注意，代码，因为它在 fiddle 中，可能会使您的浏览器在一段时间后冻结。

4

3 回答 3

1

我仍在努力，这就是我现在所拥有的：它不起作用，但看起来更好。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);
}
于 2012-06-25T13:21:31.763 回答
1

我认为你应该使用 across-browser library来完成这样的事情。 Microsoft Internet Explorer，尤其是在版本 < 9 中，很可能不会像您预期的那样运行，特别是当您尝试使用利用不透明度、alpha 过滤器和计时的函数时。你可以尝试使用jQuery, or Prototype, or MooTools和这样的框架。它们都以简单、安全、更好的方式制造您正在寻找的东西。

于 2012-06-24T19:28:44.287 回答
1

  • 不要initiate()从fadeIn()函数内部调用，而只是增加您的不透明度控制变量（即opacity += 1;）。

  • 当您完成动画时，您可能希望保存 setInterval 返回值以终止回调。

  • 您可能还希望通过降低间隔来提高动画速度。

    animId = setInterval("fadeIn()", 5);

于 2012-06-24T19:32:03.117 回答