使用jQuery切换DIV背景图像

207

我正在为我工​​作的公司制作一个扩展/折叠呼叫率表。我目前有一个桌子，下面有个按钮来展开它，该按钮说“展开”。除了我需要在单击按钮时将按钮更改为“折叠”，然后在再次单击按钮时将其更改为“展开”之外，此功能正常。按钮上的文字是背景图像。

因此，基本上我需要做的就是在单击div时更改div的背景图像，除了像切换一样。

jquery 
— zuk1
source
3
为什么要有背景图片？为什么不发短信？
— uınbɐɥs
1
我投了反对票，因为他从现在开始已经几年没有接受答案了，希望他还可以@ user1040899！
— gsamaras 2015年
@ user1040899 zuk1最后一次Aug 9 '10 at 0:42在SO看到的原因可能是，:(
— M. Junaid Salaat

Answers:

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

应该可以解决问题，只需将其挂接到元素的click事件中即可

$('#divID').click(function()
{
  // do my image switching logic here.
});
— 缺口
source
@fuccboi确实如此，因为当用户选择一个选项时，我使用此代码来触发动画svg选中标记。:)
— norcal johnny
好的答案，我想指出>> url（）是STRING的一部分<<如果您来自强大的typedef语言，这真的很令人困惑
— clockw0rk
62

我个人只是使​​用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');
            }
        });
    }

据我所知，此方法将可在所有浏览器中使用，并且与使用脚本中的URL更改相比，使用CSS和类玩起来更舒服。

— 凯莉
source
“注意：优雅的toggleClass在Internet Explorer 6中不起作用”
— Chaoley 2011年
43

有两种使用jQuery更改背景图片CSS的方法。

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

仔细查看以注意差异。在第二种方法中，您可以使用常规CSS并将多个CSS属性串在一起。

— 卫城
source
6
2.不正确是无效的。将多个属性串在一起是这样的：$（'selector'）。css（{'background-color'：'yellow'，'background-image'：'url（）'}）
— codecowboy
如果尝试2，则会收到错误消息-Uncaught SyntaxError：Unexpected token：
— geeky_monster，2012年
17

如果对背景图像使用CSS精灵，则可以根据扩展还是折叠来使背景偏移+/- n像素。不是切换，而是比切换背景图片网址更接近的切换。

— 戴夫·沃德
source
2
奖励：如果使用单独的图像，则仅实际加载在加载时显示的图像。在加载第二种状态之前切换图像时会有很小的延迟。使用精灵，您只有一个图像，并且已经存在。
— 拉萨尔
14

这是我的方法：

的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');
});
— 卢帕克斯
source
您最终可能会使用jQuery .toggleClass()功能。
— Paulo Bueno 2012年
在我发布此消息两天后发现了关于toggleClass的信息：P
— Loupax 2012年
10

一种方法是将两个图像都放在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>
— alexp206
source
5

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

jsapi只是从Google CDN加载jQuery（更易于在桌面上测试misc文件）。

替换用于跨浏览器兼容性（操作符和即在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>
— 恩诺布雷夫
source
1
只是作为示例。这样，整个代码段都可以独立工作。
— enobrev
20
对于面向公众的网站，最好从Google加载它。Google的CDN很有可能比您的网站快，它可以与您网站上的其他内容并行下载，并且使用它的网站越多，就越有可能使用来自用户浏览器的缓存副本。
— 戴夫·沃德
2
如果Google倒闭而我还活着；让我知道。
— greenimpala 2010年
1
@Nick转到jQuery.com，您将发现他们自己的网站使用<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
— meagar
2
@Nick问题应该是，如果不使用Google ，为什么不希望加载。:-)
— John Parker
5

我的动画：

$(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)
    });    
});
— 菲尔
source
4

我确实使用正则表达式进行挖掘，因为我想保留相对路径而不使用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);
                }
            }
        );
— user2220104
source
3

旧帖子，但这将允许您使用图像精灵，并通过使用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');
  });

});
— 双唇
source
2

CSS Sprite最有效。我尝试使用jQuery切换类并操纵“ background-image”属性，但均无效果。我认为这是因为浏览器（至少是最新的稳定版Chrome）无法“重新加载”已加载的图像。

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

— 杰布
source
2

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

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
简单？这可能要简单得多。为什么随机？
— uınbɐɥs
因为用户更容易看到更改背景的内容，并进行更改:)。抱歉，我的英语是
0

我也总是使用时间戳，以防止浏览器缓存图像。例如，如果用户旋转他们的化身，它将经常被缓存并且看起来没有变化。 

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

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");
— 亚当·范·布斯基克
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.