JQuery ile DIV arka plan resmini değiştirme

Çalıştığım şirket için bir arama / genişletme arama oranı tablosu yapıyorum. Şu anda genişletmek için altında düğmeli bir tablo var, düğme "Genişlet" diyor. Ben tıklandığında "Daralt" değiştirmek için düğmeye gerek ve daha sonra tekrar tıklandığında elbette "Genişlet" geri dönmek dışında işlevseldir. Düğmedeki yazı bir arka plan görüntüsüdür.

Temelde ihtiyacım olan tek şey bir div'in arka plan görüntüsünü tıklamak gibi değiştirmektir, bir çeşit geçiş gibi.

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

Hile yapmalı, sadece öğedeki bir tıklama etkinliğine bağla

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

Şahsen sadece 2 sınıf arasında geçiş yapmak için JavaScript kodunu kullanırdım.

CSS, div MINUS arka plan kuralınızda ihtiyacınız olan her şeyi ana hatlarıyla belirtin, ardından her biri doğru arka plan resmine (veya hareketli grafik kullanıyorsanız arka plan konumuna) sahip kural olarak iki sınıf ekleyin (örneğin: genişletilmiş ve daraltılmış).

Farklı görüntülere sahip 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;}

Veya resim hareketli grafikli CSS

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

.expanded {background-position: left bottom;}

Sonra...

Resimli JavaScript kodu

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

Sprite ile JavaScript

Not: zarif toggleClass, Internet Explorer 6'da çalışmaz, ancak aşağıdaki addClass/ removeClassyöntem de bu durumda iyi çalışır

En zarif çözüm (ne yazık ki Internet Explorer 6 dostu değil)

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

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

Bildiğim kadarıyla bu yöntem tarayıcılar arasında çalışacak ve CSS ve sınıflarla oynamak komut dosyasındaki URL değişikliklerinden çok daha rahat hissederdim.

JQuery ile arka plan görüntüsü CSS'sini değiştirmenin iki farklı yolu vardır.

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

Farklılıkları not etmek için dikkatlice bakın. İkincisi, geleneksel CSS kullanabilir ve birden çok CSS özelliğini bir araya getirebilirsiniz.

Arka plan görüntüleri için bir CSS hareketli grafiği kullanırsanız , genişleyen veya daralttığınıza bağlı olarak arka plan kayması +/- n pikselleri çarpabilirsiniz. Açma / kapatma düğmesi değil, arka plan resmi URL'lerini değiştirmek zorunda kalmadan daha yakın.

İşte nasıl yaparım:

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

Bunu yapmanın bir yolu, her iki görüntüyü HTML'ye, bir SPAN veya DIV içine koymaktır, varsayılanı CSS ile veya sayfa yüklemesinde JS ile gizleyebilirsiniz. Ardından, tıklamayla geçiş yapabilirsiniz. İşte bir liste sol / aşağı simgeleri koymak için kullanıyorum benzer bir örnek:

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

Bu, WinXP'deki tüm mevcut tarayıcılarda çalışır. Temel olarak sadece mevcut arka plan görüntüsünün ne olduğunu kontrol etmek. Resim1 ise resim2'yi, aksi takdirde resim1'i gösterin.

Jsapi şeyler yalnızca Google CDN'den jQuery yükler (masaüstünde çeşitli bir dosyayı test etmek daha kolay).

Yerine tarayıcılar arası uyumluluk içindir (opera ve yani url ve firefox, chrome ve safari tırnakları kaldırın).

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

Benimki animasyonlu:

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

Göreli bir yolu korumak ve addClass işlevini kullanmak istemediğimden, düzenli ifadeler kullanarak benimkini yaptım. Sadece kıvrılmış yapmak istedim, 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);
                }
            }
        );

Eski yazı, ancak bu, css özelliği (arka plan, tekrar, sol üst) kısayolunu kullanarak bir görüntü hareketli grafiği kullanmanıza ve tekrarlamayı ve konumlandırmayı ayarlamanıza izin verir.

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

});

Bir forumda bir çözüm buldum, Toggle Background Img .

CSS Sprite'lar en iyi sonucu verir. Sınıfları değiştirmeyi ve jQuery ile 'arka plan resmi' özelliğini manipüle denedim, hiçbiri çalıştı. Bence tarayıcılar (en azından en son kararlı Chrome) önceden yüklenmiş bir görüntüyü "yeniden yükleyemez".

Bonus: CSS Sprite'ların indirilmesi daha hızlı ve görüntülenmesi daha hızlıdır. Daha az HTTP isteği, daha hızlı sayfa yükleme anlamına gelir. HTTP sayısını azaltmak, ön uç performansını iyileştirmenin en iyi yoludur, bu nedenle bu rotaya her zaman gitmenizi öneririm.

Bu, sitenin arka planını bir öğe listesiyle değiştiren oldukça basit bir yanıttır

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

Tarayıcıların görüntüyü önbelleğe almasını önlemek için her zaman bir zaman damgası da kullanırım. Örneğin, kullanıcı avatarını döndürüyorsa, genellikle önbelleğe alınır ve değişmez.

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

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