用jQuery切换DIV背景图片

我正在为我工​​作的公司制定一个扩展/崩溃通话费率表。 我目前有一个表下面有一个button来扩展它,button说“展开”。 它是function,除了我需要点击时,button切换到“折叠”,当然,当它再次点击时,回到“展开”。 在button上写字是背景图像。

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

 $('#divID').css("background-image", "url(/myimage.jpg)"); 

应该做的伎俩,只要将它挂在元素上的一个点击事件

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

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

让CSS在你的分区中概括你需要的所有东西,然后添加两个类(例如:expanded&collapsed)作为每个具有正确背景图像的规则(或者如果使用精灵,则是背景位置)。

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方法也能正常工作

最优雅的解决scheme(不幸的是没有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更舒服。

有两种不同的方式来改变一个背景图像与jQuery的CSS。

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

仔细观察,注意差异。 在第二个,你可以使用传统的CSS和串联多个CSS属性。

如果您将CSS精灵用于背景图像,则可能会根据您正在展开还是折叠而将背景偏移撞击+/- n个像素。 不是一个切换,但更接近它,​​而不必切换背景图像的URL。

下面是我如何做到这一点:

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'); }); 

一种方法是将两个图像放在HTML中,在SPAN或DIV中,可以使用CSS隐藏默认值,或者在页面加载时隐藏默认值。 然后你可以切换点击。 这里是一个类似的例子,我正在使用左/下图标列表:

 $(document).ready(function(){ $(".button").click(function () { $(this).children(".arrow").toggle(); return false; }); }); <a href="#" class="button"> <span class="arrow"> <img src="http://img.dovov.comicons/left.png" alt="+" /> </span> <span class="arrow" style="display: none;"> <img src="http://img.dovov.comdown.png" alt="-" /> </span> </a> 

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

jsapi的东西只是从谷歌CDN加载jQuery(更容易在桌面上testingmisc文件)。

replace是为了跨浏览器的兼容性(歌剧和ie即加引号的URL和Firefox,铬和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> 

我做了我的正则expression式,因为我想保留一个相对path,而不是使用添加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); } } ); 

旧的post,但这将允许您使用图像精灵,并通过使用CSS属性的简写(背景,重复,左上)来调整重复以及定位。

 $.each($('.smallPreview'), function(i){ var $this = $(this); $this.mouseenter(function(){ $this.css('background', 'url(Assetshttp://img.dovov.comimgBckg-Small_Over.png) no-repeat 0 0'); }); $this.mouseleave(function(){ $this.css('background', 'url(Assetshttp://img.dovov.comimgBckg-Small.png) no-repeat 0 0'); }); }); 

我的animation是:

 $(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) }); }); 

我在论坛上find了一个解决scheme, 切换背景图片

CSS精灵效果最好。 我尝试切换类和jQuery操作“背景图像”属性,没有任何工作。 我认为这是因为浏览器(至less是最新的Chrome浏览器)无法“重新载入”已经加载的图像。

奖金:CSS Sprites下载速度更快,显示速度更快。 减lessHTTP请求意味着更快的页面加载。 减lessHTTP的数量是提高前端性能的最好方法,所以我build议一直使用这条路线。

这是一个相当简单的回应改变网站的背景与物品清单

 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