onclick事件的变化与转型淡出背景图片 [英] onclick event change background-image with fade transition

问题描述

我在寻找jQuery的行程改变身体的背景图像（或100％-height包装格）上的一类元素的click事件，具有淡入淡出的过渡效果。
是否可以？
谢谢你在前进。

解决方案

  

  
• DEMO：的http://so.devilmay$c$c.it/onclick-event-change-background-image-with-fade-transition

  

CSS：

  * {保证金：0;填充：0}
HTML，车身宽度{：100％;身高：100％;保证金：0;填充：0;溢出：隐藏}
#bg {立场：绝对的;身高：100％;宽度：100％;保证金：0;填充：0; z-index的：0}
 

HTML

 ＆LT; D​​IV＆GT;＆LT; IMG ID =BGSRC =image.jpg的ALT =/＆GT;＆LT; / DIV＆GT;
 

JQUERY

  VAR图像= [home_photo_welshboy.jpg，home_photo_jam343.jpg];$（函数（）{
    $（'变化'）。点击（函数（五）{
    VAR图像=图像[Math.floor（的Math.random（）* images.length）];
        $（'＃BG）。父（）。淡出（200，函数（）{
            $（'＃BG）ATTR（'src'中，'http://l.yimg.com/g/images/'+image）。
              $（本）.fadeIn（200）;
        }）;
    }）;
}）;
 

I'm searching for a trip in jQuery for changing the background-image of the body (or of a 100%-height "wrapper" div) on a click event of a class element, with a cross-fade transition effect. Is it possible? Thank you in advance.

解决方案

• DEMO: http://so.devilmaycode.it/onclick-event-change-background-image-with-fade-transition

CSS:

*{margin:0;padding:0}
html ,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
#bg{position:absolute;height:100%;width:100%;margin:0;padding:0;z-index:0}

HTML:

<div><img id="bg" src="image.jpg" alt="" /></div> 

JQUERY

var images = ["home_photo_welshboy.jpg","home_photo_jam343.jpg"];

$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://l.yimg.com/g/images/'+image); 
              $(this).fadeIn(200);
        });
    });
});

这篇关于onclick事件的变化与转型淡出背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！