jQuery按钮来改变背景图片
问题描述:
我想创建一系列按钮。当用户悬停在按钮上时,我想在后台显示不同的图像。 bg图像之间的过渡应该是平滑的交叉淡入淡出。jQuery按钮来改变背景图片
我贴的代码一点点的展现我的设置:http://jsfiddle.net/Rk4YG/
注:这会是不错的选择被停止的背景图像 - 这是否意味着使用CSS背景图像?
如果任何人都可以请帮我写一些代码来实现这个目标,或者指向一个好教程的正确方向,我会非常感激。
非常感谢您的帮助。
答
这里的东西,可以让你开始:
HTML
我们使用HTML5数据属性存储每个背景图像的名称。稍后使用jQuery .attr()
函数检索这些内容。
<div role="main" class="mid"></div>
<div class="btncontain">
<div class="btn btn1" data-bg-img="image0.png"><a href="#">Button 1</a></div>
<div class="btn btn2" data-bg-img="image1.png"><a href="#">Button 2</a></div>
<div class="btn btn3" data-bg-img="image2.png"><a href="#">Button 3</a></div>
<div class="btn btn4" data-bg-img="image3.png"><a href="#">Button 4</a></div>
<div class="btn btn5" data-bg-img="image4.png"><a href="#">Button 5</a></div>
<div class="btn btn6" data-bg-img="image5.png"><a href="#">Button 6</a></div>
<div class="btn btn7" data-bg-img="image6.png"><a href="#">Button 7</a></div>
<div class="btn btn8" data-bg-img="image7.png"><a href="#">Button 8</a></div>
<div class="clearfix"></div>
</div>
CSS
的.mid
现在坐在按钮后面。绝对定位是为了获得分层的权利。
body { padding: 0; margin:0; }
.mid { width:100%; height: 700px; position:absolute; }
.btncontain { width:80%; margin: 0 auto; position:absolute; }
.btn a { width: 150px; height: 70px; background: yellow; float: left; margin: 0 30px 100px 30px; }
.mid { background-image: url(image0.png);
的JavaScript
jQuery的动画功能在背景的顶部淡入div.mid
。一旦它是100%不透明,那么我们将背景图片切换到新图片并隐藏div.mid
。
$(function(){
$('.btn a').parents('.btn').hover(function(){
var img = $(this).attr('data-bg-img'),
afterFadeIn = function() {
$('body').css('background-image', 'url(' + img + ')');
$('mid').css('opacity', 0);
};
$('.mid')
.css({'background-image': 'url(' + img + ')', 'opacity': 0})
.animate({ 'opacity' : 1 }, 500, afterFadeIn);
});
});
+0
感谢您的回复。我刚刚在jsfiddle中用一些谷歌图片引用代替了.png,但是悬停似乎并不奏效。有没有可能帮助我找到问题? – Nelga 2012-03-10 14:23:58
jsfiddle代码是一个很大的帮助。包括它+1。 – 2012-03-02 06:10:33