Question

我有5个按钮，当我通过我的指针o时，我想改变背景图像，但是有淡化效果。

HTML：

<body>
  <div id="content" class="row">
    <div class="large-4 center columns ">
      <a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
    </div>
    <div class="large-4 center columns">
      <a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
    </div>
    <div class="large-4 center columns">
      <a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
    </div>
    <div class="large-4 large-offset-2 center columns">
      <a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
    </div>  
    <div class="large-4 center columns end">
      <a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
    </div>
  </div>
</body>

Jquery的：

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();

  $("#column1").mouseover(function(){
      $("body").css('background-image', 'url("img/dib1.jpg")');  
  });

  $("#column2").mouseover(function(){
      $("body").css('background-image', 'url("img/dib2.jpg")');
  });

  $("#column3").mouseover(function(){
      $("body").css('background-image', 'url("img/dib3.jpg")');
  });

  $("#columna4").mouseover(function(){
      $("body").css('background-image', 'url("img/dib4.jpeg")');
  });

  $("#column5").mouseover(function(){
      $("body").css('background-image', 'url("img/dib5.jpg")');
  });

</script>

问题是当更改图像时，是如此之快，因为我想要进行淡入淡出过渡，尝试将fadetoggle设置得很慢，但是因为我的选择器使用“body”而消失了所有内容。

Answer 1

这是我做的一点模拟。它只是一个基础，但应该很容易修改。

http://jsfiddle.net/sB8hU/

HTML：

<div id="content" class="row">
        <div class="large-4 center columns ">
          <a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
        </div>
        <div class="large-4 center columns">
          <a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
        </div>
        <div class="large-4 center columns">
          <a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
        </div>
        <div class="large-4 large-offset-2 center columns">
          <a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
        </div>  
        <div class="large-4 center columns end">
          <a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
        </div>
      </div>

<div class="bg1"></div>
<div class="bg2"></div>

jQuery的：

$('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
    var bgImage = $(this).data('bg');
    if( $('.bg1').is(':visible') ){
        $('.bg2').css('background-image', 'url(' + bgImage + ')');
        $('.bg1').fadeOut(200, function(){
            $('.bg2').fadeIn(200);
        });
    } else {
        $('.bg1').css('background-image', 'url(' + bgImage + ')');
        $('.bg2').fadeOut(200, function(){
            $('.bg1').fadeIn(200);
        });
    }
});

Answer 2

使用绝对元素并为其添加背景。这样做：

<body>
<div id="bg"></div>

风格：

#bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}

并遵循同样的技巧。：d

Answer 3

CSS3是最简单的方法。你只需要像现有的那样用JavaScript重新分配图像，然后将它放在body标签中将为你完成剩下的工作。一定要玩满足您需求的时间。免责声明：此转换在早于10的IE中不起作用。

body {
   transition: background .5s ease-in-out;
   -moz-transition: background .5s ease-in-out;
   -webkit-transition: background .5s ease-in-out;
}

Answer 4

不幸的是，目前还不能用简单的＆＃34; CSS。

但是，您可以将容器（您的网页）与position: relative一起使用，并使用div和position: absolute将主top: 0; left: 0放入其中。然后添加与此div相同的级别：

<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" /> 
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />

在你的CSS中：

img.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-out; /* could be another duration / transition effect */
  -webkit-transition: opacity 500ms ease-out;
  -moz-transition: opacity 500ms ease-out;
  -ms-transition: opacity 500ms ease-out;
  -o-transition: opacity 500ms ease-out;
}

img.bg-img.active {
  opacity: 1;
}

然后在您的代码中，不要更改＆＃34; body＆＃34;的background-image属性，而是更改所需图像的类，然后添加/删除active。

Answer 5

您可以使用CSS 3过渡属性。在样式表中定义类，例如如下：

.backgroundChanged
{
    background-image: your image;
    transition-property:background-image;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}

然后在需要时以编程方式在javascript中应用此类。希望这可以帮助。

如何使用背景图像进行淡入淡出过渡

5 个答案: