用jQuery切换DIV背景图像

我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它，按钮说“展开”。它是功能性的，除了我需要按钮改变为“折叠”时，它被点击，然后当然回到“展开”时，再次点击。按钮上的文字是背景图像。

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

当前回答

旧帖子，但这将允许你使用图像精灵和调整重复，以及通过使用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

其他回答

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

$('选择'). css(“分辨率”,“url(图片/ example.jpg)”); $('选择'). css({“背景图像”:“url(图片/ example.jpg)”});

仔细观察，注意不同点。在第二种方法中，您可以使用传统的CSS并将多个CSS属性串在一起。

2011-02-07 00:39:21

我在一个论坛上找到了一个解决方案，切换背景Img。

2010-03-24 15:43:47

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

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

我是这样做的:

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

用jQuery切换DIV背景图像

推荐文章

最新文章

标签