用jQuery切换DIV背景图像

我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它，按钮说“展开”。它是功能性的，除了我需要按钮改变为“折叠”时，它被点击，然后当然回到“展开”时，再次点击。按钮上的文字是背景图像。

所以基本上我所需要的是改变一个div的背景图像时，它被点击，除了有点像一个切换。

835877 次浏览
小开 
$('#divID').css("background-image", "url(/myimage.jpg)");

应该这样做，只是在元素上的点击事件中连接它吗

$('#divID').click(function()
{
// do my image switching logic here.
});
小开

一种方法是把两个图像放在HTML中，在SPAN或DIV中，你可以用CSS隐藏默认值，或者用JS隐藏页面加载。然后你可以切换到点击。下面是一个类似的例子，我用来把左/下图标放在列表上:

$(document).ready(function(){
$(".button").click(function () {
$(this).children(".arrow").toggle();
return false;
});
});


<a href="#" class="button">
<span class="arrow">
<img src="/images/icons/left.png" alt="+" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" alt="-" />
</span>
</a>
小开

如果你为背景图像使用CSS精灵，你可以根据你是在展开还是折叠来碰撞背景偏移量+/- n像素。不是切换，但比切换背景图像url更接近切换。

小开

这适用于WinXP上的所有当前浏览器。基本上就是检查当前的背景图像是什么。如果是image1，则显示image2，否则显示image1。

jsapi只是从谷歌CDN加载jQuery(更容易在桌面上测试misc文件)。

替换是为了跨浏览器兼容(opera和ie为url添加引号，而firefox、chrome和safari删除引号)。

<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';


$('.mydiv').click(function() {
if ($(this).css('background-image').replace(/"/g, '') == original_image) {
$(this).css('background-image', second_image);
} else {
$(this).css('background-image', original_image);
}


return false;
});
});
</script>


<style>
.mydiv {
background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv">&nbsp;</div>
</body>
</html>
小开

我在一个论坛上找到了一个解决方案，Toggle Background Img。

小开

我个人只会使用JavaScript代码在两个类之间切换。

让CSS在你的div上列出你需要的所有东西减去背景规则，然后添加两个类(例如:扩展&折叠)作为规则，每个规则都具有正确的背景图像(或背景位置，如果使用精灵)。

不同图片的CSS

.div {
/* button size etc properties */
}


.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}

或CSS与图像精灵

.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}


.expanded {background-position: left bottom;}

然后……

带有图像的JavaScript代码

$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}

JavaScript与精灵

注意:优雅的toggleClass在Internet Explorer 6中不能工作，但是下面的addClass/removeClass方法在这种情况下也可以很好地工作

最优雅的解决方案(不幸的是Internet Explorer 6不友好)

$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}


$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}

据我所知，这种方法可以跨浏览器工作，而且比起在脚本中修改URL，我更喜欢使用CSS和类。

小开

使用jQuery有两种不同的方法来更改背景图像CSS。

  1. $('selector').css('backgroundImage','url(images/example.jpg)');
  2. $('selector').css({'background-image':'url(images/example.jpg)'});

仔细观察，注意不同点。在第二种方法中，您可以使用传统的CSS并将多个CSS属性串在一起。

小开

我是这样做的:

CSS

#button{
background-image: url("initial_image.png");
}


#button.toggled{
background-image:url("toggled_image.png");
}

JS

$('#button').click(function(){
$('#my_content').toggle();
$(this).toggleClass('toggled');
});
小开

CSS精灵效果最好。我尝试切换类和使用jQuery操纵'background-image'属性，没有工作。我认为这是因为浏览器(至少是最新的稳定Chrome)不能“重新加载”已经加载的图像。

好处:CSS精灵下载和显示速度更快。更少的HTTP请求意味着更快的页面加载。减少HTTP的数量是提高前端性能的最好的方法，所以我建议一直走这条路。

小开

这是一个相当简单的响应，使用项目列表更改网站的背景

function randomToN(maxVal) {
var randVal = Math.random() * maxVal;
return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
小开

旧帖子，但这将允许你使用图像精灵和调整重复，以及通过使用css属性的速记(背景，重复，左上角)的定位。

$.each($('.smallPreview'), function(i){
var $this = $(this);


$this.mouseenter(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
});


$this.mouseleave(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
});


});
小开

我使用正则表达式，因为我想保留一个相对路径，而不使用添加addClass函数。我只是想让它变得复杂，哈哈。

$(".travelinfo-btn").click(
function() {
$("html, body").animate({scrollTop: $(this).offset().top}, 200);
var bgImg = $(this).css('background-image')
var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
if(bgImg.match(/collapse/)) {
$(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
} else {
$(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
}
}
);
小开

我的是动画:

$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
小开

我总是使用时间戳来防止浏览器缓存图像。例如，如果用户正在旋转他们的头像，它通常会被缓存并且看起来没有改变。

var d = new Date();
var t = d.getTime();


$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");

提交答案