Chuyển đổi hình nền DIV với jQuery

Tôi đang thực hiện bảng tỷ lệ cuộc gọi mở rộng / thu gọn cho công ty tôi làm việc. Tôi hiện có một bảng có một nút bên dưới để mở rộng nó, nút có nội dung "Mở rộng". Đó là chức năng ngoại trừ tôi cần nút để thay đổi thành "Thu gọn" khi được nhấp và sau đó tất nhiên quay lại "Mở rộng" khi được nhấp lại. Chữ viết trên nút là hình nền.

Vì vậy, về cơ bản, tất cả những gì tôi cần là thay đổi hình nền của div khi nó được nhấp, ngoại trừ loại giống như chuyển đổi.

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

Nên thực hiện thủ thuật, chỉ cần nối nó trong một sự kiện nhấp chuột vào phần tử

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

Cá nhân tôi chỉ sử dụng mã JavaScript để chuyển đổi giữa 2 lớp.

Có CSS ​​phác thảo mọi thứ bạn cần trên div MINUS của bạn theo quy tắc nền, sau đó thêm hai lớp (ví dụ: mở rộng & thu gọn) làm quy tắc mỗi lớp với hình nền chính xác (hoặc vị trí nền nếu sử dụng sprite).

CSS với các hình ảnh khác nhau

.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;}

Hoặc CSS với hình ảnh sprite

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

Sau đó...

Mã JavaScript có hình ảnh

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

JavaScript với sprite

Lưu ý: toggleClass thanh lịch không hoạt động trong Internet Explorer 6, nhưng phương thức addClass/ bên dưới removeClasscũng sẽ hoạt động tốt trong tình huống này

Giải pháp thanh lịch nhất (tiếc là không thân thiện với 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');
            }
        });
    }

Theo như tôi biết thì phương pháp này sẽ hoạt động trên các trình duyệt và tôi sẽ cảm thấy thoải mái hơn khi chơi với CSS và các lớp so với thay đổi URL trong tập lệnh.

Có hai cách khác nhau để thay đổi CSS hình nền bằng jQuery.

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

Nhìn kỹ để lưu ý sự khác biệt. Trong lần thứ hai, bạn có thể sử dụng CSS thông thường và xâu chuỗi nhiều thuộc tính CSS lại với nhau.

Nếu bạn sử dụng CSS sprite cho hình ảnh nền, bạn có thể tăng độ lệch nền +/- n pixel tùy thuộc vào việc bạn đang mở rộng hay thu gọn. Không phải là một chuyển đổi, nhưng gần với nó hơn là phải chuyển URL hình ảnh nền.

Đây là cách tôi làm điều đó:

CSS

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

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

Mã não

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

Một cách để làm điều này là đưa cả hai hình ảnh vào HTML, bên trong SPAN hoặc DIV, bạn có thể ẩn mặc định bằng CSS hoặc với JS khi tải trang. Sau đó, bạn có thể chuyển đổi trên nhấp chuột. Đây là một ví dụ tương tự tôi đang sử dụng để đặt các biểu tượng trái / xuống trong danh sách:

$(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>

Điều này hoạt động trên tất cả các trình duyệt hiện tại trên WinXP. Về cơ bản chỉ cần kiểm tra những gì hình ảnh backgrond hiện tại. Nếu đó là image1, hiển thị image2, nếu không thì hiển thị image1.

Công cụ jsapi chỉ tải jQuery từ Google CDN (dễ dàng hơn để kiểm tra tệp linh tinh trên máy tính để bàn).

Sự thay thế là để tương thích giữa nhiều trình duyệt (opera và tức là thêm dấu ngoặc kép vào url và firefox, chrome và safari xóa dấu ngoặc kép).

<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>

Của tôi là hoạt hình:

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

Tôi đã khai thác bằng cách sử dụng các biểu thức thông thường, vì tôi muốn duy trì một đường dẫn tương đối và không sử dụng hàm addClass. Tôi chỉ muốn làm cho nó phức tạp, lol.

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

Bài đăng cũ, nhưng điều này sẽ cho phép bạn sử dụng một sprite hình ảnh và điều chỉnh lặp lại cũng như định vị bằng cách sử dụng tốc ký cho thuộc tính css (nền, lặp lại, trên cùng bên trái).

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

});

Tôi đã tìm thấy một giải pháp trong một diễn đàn, Toggle Background Img .

CSS Sprites hoạt động tốt nhất. Tôi đã thử chuyển đổi các lớp và thao tác thuộc tính 'hình nền' với jQuery, không có cái nào hoạt động. Tôi nghĩ đó là vì các trình duyệt (ít nhất là Chrome ổn định mới nhất) không thể "tải lại" một hình ảnh đã được tải.

Phần thưởng: CSS Sprites nhanh hơn để tải xuống và hiển thị nhanh hơn. Yêu cầu HTTP ít hơn có nghĩa là tải trang nhanh hơn. Giảm số lượng HTTP là cách tốt nhất để cải thiện hiệu suất giao diện người dùng, vì vậy tôi khuyên bạn nên đi tuyến đường này mọi lúc.

Đây là một phản hồi khá đơn giản thay đổi nền của trang web với một danh sách các mục

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

Tôi luôn luôn sử dụng dấu thời gian để ngăn các trình duyệt lưu vào hình ảnh. Ví dụ: nếu người dùng đang xoay hình đại diện của họ, nó sẽ thường được lưu vào bộ nhớ cache và dường như không thay đổi.

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

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