5

我正在尝试制作一个 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很陌生。

4

2 回答 2

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/

于 2013-08-01T11:03:28.657 回答
1

您可以为每个 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");  
       });
    });

这应该有效。

于 2013-08-01T11:05:57.593 回答