onclick事件更改背景图像与褪色转换 [英] onclick event change background-image with fade transition
本文介绍了onclick事件更改背景图像与褪色转换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一个jQuery的旅行,改变一个类元素的点击事件的身体(或100%高度包装div)的背景图像,具有交叉淡入淡出过渡效果。
是可能吗?
提前谢谢。
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屋!
查看全文