用jQuery切换DIV背景图片

183

我正在为我工作的公司制作展开/折叠通话费率表。我目前有一张桌子，下面有一个按钮来展开它，按钮显示“展开”。它是功能性的，除了我需要点击按钮时更改为“折叠”，然后当它再次点击时返回到“展开”。在按钮上书写是背景图像。用jQuery切换DIV背景图片

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

来源

2008-10-31 zuk1

为什么背景图像？为什么不*文字*？ – 2012-09-04 19:41:24

我投票因为他几年后不接受答案，希望他可以通过@ user1040899！ – gsamaras 2015-12-09 03:33:58

@ user1040899 zuk1最后一次访问`08年8月9日0：42`在** SO **也许这就是为什么，:( – 2016-11-03 11:17:20

402

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

应该做的伎俩，只是把它挂在点击事件的元素上做到这一点

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

来源

2008-10-31 14:31:48 Nick

这是jquery对话框的好回答。 – 2013-03-19 23:29:28

为我工作。^^谢谢！ – khailcs 2016-05-06 23:44:48

这是否与SVGs一起工作？ – 2016-12-02 07:27:13

一种方法是将两个图像的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="/images/icons/left.png" alt="+" /> 
    </span> 
    <span class="arrow" style="display: none;"> 
     <img src="/images/down.png" alt="-" /> 
    </span> 
</a>

来源

2008-10-31 14:32:48 alexp206

如果您使用的背景图像的CSS精灵，你可能碰到的背景偏移+/- ň根据像素无论你是在扩张还是在崩溃。不是切换，而是比切换背景图片网址更接近它。

来源

2008-10-31 14:32:54

奖励：如果您使用单独的图像，则只有加载时显示的图像是实际加载。在加载第二个状态之前切换图像时会有小的延迟。有了精灵，你只有一个图像，它已经在那里。 – Lasar 2008-10-31 15:29:04

这适用于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>

来源

2008-10-31 14:33:57 enobrev

只是做了这个例子。这样，整个代码片段就可以独立运行。 – enobrev 2008-10-31 14:44:13

我发现在一个论坛上的解决方案，Toggle Background Img。

来源

2010-03-24 15:43:47

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

让CSS概括你需要的所有东西然后减去背景规则，然后将两个类（例如：expanded &折叠）作为每个具有正确背景图像（或使用精灵的背景位置）的规则。

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变化在脚本中。

来源

2010-09-27 23:12:11 Kelly

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

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

仔细看注意的差异。在第二个中，您可以使用传统的CSS并将多个CSS属性串起来。

来源

2011-02-07 00:39:21 Ecropolis

这是我如何做到这一点：

CSS

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

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

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

来源

2012-01-11 22:30:08 Loupax

CSS精灵效果最好。我尝试切换类并使用jQuery处理'background-image'属性，但都没有成功。我认为这是因为浏览器（至少最新的稳定Chrome）无法“重新加载”已经加载的图像。

奖励：CSS Sprites下载速度更快，显示速度更快。减少HTTP请求意味着更快的页面加载。减少HTTP的数量是改善前端性能的最佳方式，所以我建议始终使用此路线。

来源

2012-03-05 19:06:50 DjebbZ

这是一个相当简单的回应改变网站的背景与项目

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

来源

2012-05-15 00:47:21

旧文章的列表，但是这将允许您通过使用图像精灵和调整重复以及定位使用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'); 
    }); 

});

来源

2012-06-19 14:18:47 bphillips

我做了我的正则表达式，因为我想保留一个相对路径，而不是使用add 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); 
       } 
      } 
     );

来源

2013-03-28 14:15:44 user2220104

矿是动画：

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

来源

2016-07-06 09:31:08 yPhil

用jQuery切换DIV背景图片

回答

相关问题