Jquery圖像大小操作

Question

我試圖制作一個jQuery圖像查看庫，所以你將鼠標懸停在圖像上，它成為gal（圖庫）div的背景。

$(document).ready(function(){
    $("#img1").hover(function(){
        var img1 = document.getElementById("gal");
        gal.style.background="url(images/img1.png), black";
    });
    $("#img1").mouseout(function(){
        gal.style.background="none";
    });
});
$(document).ready(function(){
    $("#img2").hover(function(){
        var img2 = document.getElementById("gal");
        gal.style.background="url(images/img2.png), black";
    });
    $( "#img2" ).mouseout(function(){
         gal.style.background="none";
    });
});

HTML代碼

        <section>       
 <h1> Images</h1>
 <h3> Photos </h3>
 <div id="gal">
 </div>
 <img id="img" src="images/img1.png" width="100px" height="100px"/>
 <img id="img" src="images/img2.png" width="100px" height="100px"/>

    </section>

這是我的代碼，它工作得非常好，但使用此代碼我需要單獨輸入每個div。

有沒有辦法，當你將鼠標懸停在圖像上時，它知道是什么圖像，它使div背景相等？ 謝謝您的幫助。

PS我是JavaScript新手。

Answer 1

嘗試這個：

   $(document).ready(function(){
   var gal = $("#gal"); //Avoid repeated traverse

   $("img").hover(function(){
     gal.css("background",'url(' + $(this).attr('src') + ')');  
     //Assuming you want to set current image as background image
    });

   $( "img" ).mouseout(function(){
      gal.css("background","none");  
   });
  });

這是基本機制。 您可能必須根據您的要求更改選擇器和路徑。

小提琴： http ： //jsfiddle.net/NNGdR/5/

Answer 2

您可以為每個img分配相同的類。 示例：

<img class="img-class" src="img1" />
<img class="img-class" src="img2" />
<img class="img-class" src="img3" />
<img class="img-class" src="img4" />

$(document).ready(function(){
       var gal = $("#gal"); //Avoid repeated traverse
      //Assign class so that this doesnt happen on other images in the html
       $(".img-class").hover(function(){
         gal.css("background",$(this).attr('src'));  
         //set current image as background
        });

       $( ".img-class" ).mouseout(function(){
          gal.css("background","none");  
       });
    });

這應該工作。