使用 jQuery 切换 DIV 背景图像
Posted
技术标签:
【中文标题】使用 jQuery 切换 DIV 背景图像【英文标题】：Switching a DIV background image with jQuery 【发布时间】：2010-09-20 04:50:22 【问题描述】：我正在为我工作的公司制作展开/折叠通话费率表。我目前有一个表格，下面有一个按钮来展开它，按钮上写着“展开”。它是功能性的，除了我需要在单击它时将按钮更改为“折叠”，然后在再次单击它时返回到“展开”。按钮上的文字是背景图片。
所以基本上我只需要在单击 div 时更改它的背景图像，除了有点像切换。
【问题讨论】：
为什么是背景图片？为什么不文本？ 我投了反对票，因为几年后他没有接受答案，希望他没事，尽管@user1040899！ @user1040899 zuk1 最后一次看到Aug 9 '10 at 0:42 在 SO 也许这就是原因，:(
【参考方案1】：
$('#divID').css("background-image", "url(/myimage.jpg)");
应该做到这一点，只需将其连接到元素上的点击事件中
$('#divID').click(function()
// do my image switching logic here.
);
【讨论】：
@fuccboi 确实如此，因为当用户选择一个选项时，我使用此代码触发动画 svg 复选标记。 :) 很好的回答，我想指出>> url() 是字符串的一部分 【参考方案2】：我个人只会使用 javascript 代码在 2 个类之间切换。
让 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');
);
据我所知，这种方法可以跨浏览器使用，而且我会觉得使用 CSS 和类比使用脚本中的 URL 更改更舒服。
【讨论】：
"注意：优雅的 toggleClass 在 Internet Explorer 6 中不起作用"【参考方案3】：使用 jQuery 更改背景图像 CSS 有两种不同的方法。
$('selector').css('backgroundImage','url(images/example.jpg)');
$('selector').css('background-image':'url(images/example.jpg)');
仔细观察并注意差异。第二种，您可以使用常规的 CSS 并将多个 CSS 属性串在一起。
【讨论】：
2.不正确无效。将多个属性串在一起是这样完成的： $('selector').css('background-color':'yellow','background-image':'url()') 如果我尝试 2. ，我得到一个错误 - Uncaught SyntaxError: Unexpected token : 正确，但我必须使用整个路径才能使其工作！不工作：“网址（../images/img.jpg）”【参考方案4】：如果您对背景图像使用 CSS 精灵，则可以根据您是展开还是折叠来增加背景偏移量 +/- n 个像素。不是切换，但比切换背景图像 URL 更接近它。
【讨论】：
奖励：如果您使用单独的图像，则只有在加载时显示的图像才会被实际加载。在加载第二个状态之前切换图像会有一个小的延迟。使用精灵，您只有一个图像，并且它已经存在。【参考方案5】：这是我的做法：
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');
);
【讨论】：
你最终可能会使用 jQuery.toggleClass() 功能。
在我发布这篇文章两天后发现了toggleClass：P【参考方案6】：
这样做的一种方法是将两个图像放在 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" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" />
</span>
</a>
【讨论】：
【参考方案7】：我的是动画的：
$(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)
);
);
【讨论】：
【参考方案8】：这适用于 WinXP 上的所有当前浏览器。基本上只是检查当前背景图像是什么。如果是image1，则显示image2，否则显示image1。
jsapi 只是从 Google 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://***.com/Content/img/wmd/link.png)';
var second_image = 'url(http://***.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://***.com/Content/img/wmd/link.png');
width: 100px;
height: 100px;
</style>
</head>
<body>
<div class="mydiv"> </div>
</body>
</html>
【讨论】：
只是为了这个例子。这样，整个代码 sn-p 就可以自己运行了。 从谷歌加载它更适合面向公众的网站。 Google 的 CDN 很可能比您的网站更快，允许它与您网站上的其他内容并行下载，并且使用它的网站越多，就越有可能使用来自用户浏览器的缓存副本。 如果谷歌倒闭了，我还活着；让我知道。 @Nick 去 jQuery.com，你会发现自己的网站使用了<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
@Nick 问题应该是，如果关闭 Google，为什么不会要加载。 :-)【参考方案9】：
我使用正则表达式完成了我的工作，因为我想保留相对路径而不是使用添加 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);
);
【讨论】：
【参考方案10】：旧帖子，但这将允许您使用图像精灵并通过使用 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');
);
);
【讨论】：
【参考方案11】：我在论坛中找到了解决方案，Toggle Background Img。
【讨论】：
欢迎来到 Stack Overflow，塞巴斯蒂安。这个问题是一年多前提出的，已经有几个可以接受的答案。【参考方案12】：CSS Sprite 效果最好。我尝试使用 jQuery 切换类并操作“背景图像”属性，但没有任何效果。我认为这是因为浏览器（至少是最新的稳定版 Chrome）无法“重新加载”已加载的图像。
奖励：CSS Sprite 的下载速度和显示速度更快。更少的 HTTP 请求意味着更快的页面加载。减少 HTTP 的数量是提高前端性能的最佳方法，所以我建议一直走这条路线。
【讨论】：
【参考方案13】：这是一个相当简单的响应，通过项目列表更改站点的背景
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
【讨论】：
简单吗？它可以简单得多。为什么是随机的？ 因为用户更容易看到背景发生了什么变化，并且做改变:)。对不起我的英语【参考方案14】：我也总是使用时间戳来防止浏览器缓存图像。例如，如果用户正在旋转他们的头像，它通常会被缓存并且看起来不会改变。
var d = new Date();
var t = d.getTime();
$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");
【讨论】：
以上是关于使用 jQuery 切换 DIV 背景图像的主要内容，如果未能解决你的问题，请参考以下文章
我正在尝试使用 php 和 jquery.php 变量更改 div 的背景图像，但未获取值