Przełączanie obrazu tła DIV za pomocą jQuery

Tworzę tabelę rozwijania / zwijania stawek dla firmy, dla której pracuję. Obecnie mam pod stołem przycisk, aby go rozwinąć, przycisk mówi „Rozwiń”. Jest funkcjonalny, z wyjątkiem tego, że potrzebuję przycisku, aby przejść do „Zwiń” po kliknięciu, a następnie oczywiście z powrotem do „Rozwiń” po ponownym kliknięciu. Napis na przycisku jest obrazem tła.

Zasadniczo wszystko, czego potrzebuję, to zmienić obraz tła div po kliknięciu, z wyjątkiem czegoś w rodzaju przełącznika.

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

Powinien załatwić sprawę, wystarczy podłączyć go do zdarzenia kliknięcia na elemencie

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

Ja osobiście używałbym kodu JavaScript do przełączania między 2 klasami.

Poproś CSS, aby nakreślił wszystko, czego potrzebujesz na div MINUS, regułę tła, a następnie dodaj dwie klasy (np. Rozwinięte i zwinięte) jako reguły, z których każda ma prawidłowy obraz tła (lub pozycję tła, jeśli używasz duszka).

CSS z różnymi obrazami

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

Lub CSS z obrazkiem

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

.expanded {background-position: left bottom;}

Następnie...

Kod JavaScript z obrazkami

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

JavaScript z ikoną

Uwaga: elegancki toggleClass nie działa w Internet Explorerze 6, ale poniższa addClass/ removeClassmetoda również będzie działać dobrze w tej sytuacji

Najbardziej eleganckie rozwiązanie (niestety nie przyjazne dla Internet Explorera 6)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

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

O ile wiem, ta metoda będzie działać w różnych przeglądarkach i czułbym się znacznie bardziej komfortowo grając z CSS i klasami niż ze zmianami adresów URL w skrypcie.

Istnieją dwa różne sposoby zmiany CSS obrazu tła za pomocą jQuery.

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

Przyjrzyj się uważnie, aby zauważyć różnice. W drugim przypadku możesz użyć konwencjonalnego CSS i połączyć wiele właściwości CSS razem.

Jeśli używasz duszka CSS dla obrazów tła, możesz podnieść przesunięcie tła +/- n pikseli w zależności od tego, czy rozwijałeś się, czy zwinąłeś. Nie przełącznik, ale bliżej niż przełączanie adresów URL obrazów tła.

Oto jak to robię:

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

Jednym ze sposobów na to jest umieszczenie obu obrazów w kodzie HTML, wewnątrz SPAN lub DIV, możesz ukryć domyślne za pomocą CSS lub JS przy ładowaniu strony. Następnie możesz przełączać po kliknięciu. Oto podobny przykład, którego używam do umieszczania ikon lewo / dół na liście:

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

Działa to we wszystkich obecnych przeglądarkach w WinXP. Zasadniczo po prostu sprawdzam, jaki jest obecny obraz backgrond. Jeśli to zdjęcie1, pokaż zdjęcie2, w przeciwnym razie pokaż zdjęcie1.

Jsapi po prostu ładuje jQuery z CDN Google (łatwiejsze do testowania pliku misc na pulpicie).

Zamiennik jest kompatybilny z różnymi przeglądarkami (opera i np. Dodawaj cudzysłowy do adresu URL i Firefox, Chrome i Safari usuwaj cudzysłowy).

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

Mój jest animowany:

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

Zrobiłem to używając wyrażeń regularnych, ponieważ chciałem zachować ścieżkę względną i nie używać funkcji addClass. Chciałem tylko, żeby to było zawiłe, 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);
                }
            }
        );

Stary post, ale pozwoliłoby to na użycie duszka obrazka i dostosowanie powtarzania, a także pozycjonowania za pomocą skrótu dla właściwości css (tło, powtórzenie, lewy górny).

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

});

Znalazłem rozwiązanie na forum, Toggle Background Img .

Duszki CSS działają najlepiej. Próbowałem przełączać klasy i manipulować właściwością „background-image” za pomocą jQuery, żadna nie działała. Myślę, że dzieje się tak, ponieważ przeglądarki (przynajmniej najnowszy stabilny Chrome) nie mogą „przeładować” obrazu już załadowanego.

Bonus: duszki CSS można szybciej pobierać i wyświetlać. Mniej żądań HTTP oznacza szybsze ładowanie strony. Zmniejszenie liczby HTTP jest najlepszym sposobem na poprawę wydajności interfejsu, dlatego polecam cały czas iść tą drogą.

Jest to dość prosta odpowiedź, która zmienia tło witryny za pomocą listy elementów

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

Zawsze używam znacznika czasu, aby przeglądarki nie buforowały obrazu. Na przykład, jeśli użytkownik obraca swojego awatara, często zostanie on zbuforowany i wydaje się, że się nie zmienia.

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

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