0

我真的对 JS 一无所知，但需要对我的随机身体背景图像产生淡入淡出效果。谁能指出我正确的方向。

<script type="text/javascript"> 
var totalCount = 5;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
</script>

谢谢

4

2 回答 2

1

经过几个小时令人沮丧的研究，最终归结为以下几点：
<body>不能有透明的背景图像，因此它也不能淡入。我的问题的解决方案是用白色的全屏 div 来伪装它。我添加了一个简单的 CSS 动画，将它的不透明度从 1.0 淡化到 0.0。

于 2013-08-17T17:32:49.343 回答
0 
<!DOCTYPE html>
<html>
<header>
<script>
$(document).ready(function(){
    $("#image").hide();
    $("#clickIt").click(function(){
        function ChangeIt(){
          var totalCount = 5;
          var num = Math.ceil( Math.random(2) * totalCount );
            return num;
        }
        var speed = ChangeIt();
        $("#Body img").fadeIn(speed, linear);

    });
});
</script>
</header>
<body id="Body">
  <img id="#image" src="../apple.png" alt="img">
  <button id="clickIt"/> go </button>
</body>
</html>

只是为了指向正确的方向，您可以使用 jquery 进行淡入和淡出。以上是一个可能看起来像的示例，我相信它会因您的需要而有所不同，但请查看 jquery 网站 jquery fadein api上的淡入淡出文档

于 2013-08-17T15:41:04.300 回答