Question

我真的不知道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>

谢谢

Answer 1

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

Answer 2

<!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执行fadeIn和fadeOut。以上是一个可能看起来的例子我确定它会因你的需求而有所不同，但请查看jquery网站上{filein的文档jquery fadein api

淡出身体背景

2 个答案: