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/