Question

我正在实施一个网站，我想在点击时更改背景图片，但是很容易就像淡出淡出等等。

onclick部分是用Jquery实现的，但我正在努力解决缓动部分。

我在网上搜索过这个，但是每个解决方案都只在页面的一小部分使用div。

对我来说问题是我使用这些div作为整页，100％的宽度和高度，我在div前面有内容。

我考虑过使用精灵并为背景位置设置动画，但这没有用，因为我希望我的页面能够响应，而且我在背景网址上有百分比，精灵需要你声明固定宽度（如果我错了，请纠正我））。

另外我必须在div后面加上另一个div，所以改变不透明度解决方案无济于事。我正在实施这样的网站：http://www.samsung.com/global/microsite/galaxynote3-gear/

HTML：

<div class="Page" id="feauture3">
    <div id="feauture3_content">
        <div id="feauture3_1"><strong>Menu1</strong></div>
        <div id="feauture3_2"><strong>Menu2</strong></div>
        <div id="feauture3_3"><strong>Menu3</strong></div>
        <div id="feauture3_4"><strong>Menu4</strong></div>
    </div>
</div>

CSS：

#feauture3_1:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_2:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_3:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_4:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3 {
        position: fixed;
        height: 100%;
        width: 100%;
        background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
        left:0; 
        background-size: cover;
        background-color:#e18764;
        color:red;
}

Jquery的：

jQuery(document).ready(function($){
       $("#feauture3_1").click(function(){
       $("#feauture3").css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")');
    });

    $("#feauture3_2").click(function(){
        $("#feauture3").css('background-image','url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")')
    });

    $("#feauture3_3").click(function(){
        $("#feauture3").css('background-image','url("http://b296d35169b22ec514a7-3f0e5c3ce41f2ca4459ddb89d451f8d9.r21.cf2.rackcdn.com/wp-content/uploads/2012/11/Kawasaki-Z1-by-Ac-Sanctuary-.jpg")')
    });

    $("#feauture3_4").click(function(){
        $("#feauture3").css('background-image','url("http://4.bp.blogspot.com/-ar4zyO_Ws4M/UekF8jk7nRI/AAAAAAAA1q4/ugQZlRGTLkk/s1600/Kawasaki-Z-1000-.jpg")')
    });

});

小提琴：

http://jsfiddle.net/9pWhN/1/

感谢您的时间。

编辑：我最后使用了一个简单的$ ("#feauture3").css('background-image','url("image")')并将background-color设置为与图像匹配的整个div（真实项目没有摩托车作为图像）。这是完全可以接受的，我使用了这个解决方案。

Answer 1

css过渡怎么样？

#feauture3 {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
    left:0;
    background-size: cover;
    background-color:#e18764;
    color:red;
    -webkit-transition:all 1.4s ease-in-out;
    -o-transition:all 1.4s ease-in-out;
    -moz-transition:all 1.4s ease-in-out;
}

试试这个fiddle

Answer 2

我们可以将这些问题分成几个部分：

如何为图像添加缓动或淡化效果答案是使用CSS 3

#feauture3 {
position: fixed;
height: 100%;
width: 100%;
background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
left:0; 
background-size: cover;
background-color:#e18764;
color:red;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
 -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
}

2.如何检测加载的图像并添加src答案正在使用js hack

$("<img>").attr('src', 'http://picture.de/image.png').load(function() {
     $(this).remove();
     $('body').css('background-image', 'url(http://picture.de/image.png)');
});

使用css3 easing fading

关于图片加载的问题link

Answer 3

尝试对您的功能执行此操作：

    $("#feauture3_2").click(function(){
    $("#feauture3").css({
        'background-image' :  'url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")',
        'opacity': 0
    })
    .animate({
        'opacity': 1
    }, 800);
});

只需将其应用于每次点击活动。

Answer 4

试试这个？

DEMO http://jsfiddle.net/9pWhN/6/

在图片更改前添加.fadeOut()，然后在.fadeIn()再次添加setTimeout()。

JQUERY

$("#feauture3_1").click(function(){
   $("#feauture3").fadeOut(1000);
   setTimeout(function() {
       $("#feauture3")
           .css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")')
           .fadeIn(1000);     
   }, 1000);       
});

Answer 5

这是修复 - 加载外部图像后正确加载的测试 -

  jQuery(document).ready(function($){
  var img1 = 'http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg',
      img2 = 'http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg',
      target = $('#feauture3');

      $("#feauture3_1").click(function(){
          target.fadeOut(1000, function(){
              target.css('background-image', 'url('+img1+')');  
              target.fadeIn(500);
          });
      });

      $("#feauture3_2").click(function(){
          target.fadeOut(1000, function(){
              target.css('background-image', 'url('+img2+')');  
              target.fadeIn(500);
          });
      });

}）;

Answer 6

我相信这可能就是你要找的东西 -

http://css3.bradshawenterprises.com/cfimg/#cfimg7

在转换之前将所有图像加载到彼此之上不会产生您正在谈论的“闪光”。

使用缓动更改背景图像onclick

6 个答案:

JQUERY