Question

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

所以我基本上只需要在点击时更改div的背景图像，除了像切换一样。

Answer 1

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

应该做的伎俩，只需在元素上的点击事件中将其挂钩

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

Answer 2

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

让CSS概述你在div上需要的一切MINUS背景规则，然后添加两个类（例如：expand＆amp; 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方法在这种情况下也能正常工作

最优雅的解决方案（遗憾的是，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更改更舒服。

Answer 3

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

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

仔细注意区别。在第二种情况下，您可以使用传统的CSS和多个CSS属性串联起来。

Answer 4

如果对背景图像使用CSS精灵，则可以根据您是在展开还是折叠来碰撞背景偏移+/- n 像素。不是切换，而是比切换背景图像URL更接近它。

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

Answer 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" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

Answer 7

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

jsapi的东西只是从谷歌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>

Answer 8

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

Answer 9

我的动画是：

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

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

});

Answer 11

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

Answer 12

CSS Sprites效果最佳。我尝试用jQuery切换类和操作'background-image'属性，没有用。我认为这是因为浏览器（至少是最新稳定的Chrome）无法“重新加载”已加载的图像。

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

Answer 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

Answer 14

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

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

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

使用jQuery切换DIV背景图像

14 个答案: