Javascript Jquery图像大小操作

我正在尝试创建一个jQuery图像查看库，因此您将鼠标悬停在图像上，它将成为gal（gall）div的背景

$（文档）.ready（函数（）{
$（“#img1”）.hover（函数（）{
var img1=document.getElementById（“gal”）；
gal.style.background=“url（images/img1.png），黑色”；
});
$（“#img1”）.mouseout（函数（）{
gal.style.background=“无”；
});
});
$（文档）.ready（函数（）{
$（“#img2”）.hover（函数（）{
var img2=document.getElementById（“gal”）；
gal.style.background=“url（images/img2.png），黑色”；
});
$（“#img2”）.mouseout（函数（）{
gal.style.background=“无”；
});
});

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背景与之相等？谢谢你的帮助

另外，我对JavaScript还很陌生

试试这个：

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

这是基本机制。您可能需要根据需要更改选择器和路径

---

Fiddle:

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

$（文档）.ready（函数（）{
var gal=$（“#gal”）；//避免重复遍历
//分配类，使其不会发生在html中的其他图像上
$（“.img类”）.hover（函数（）{
gal.css（“background”，$（this.attr（'src'））；
//将当前图像设置为背景
});
$（“.img类”）.mouseout（函数（）{
gal.css（“背景”、“无”）；
});
});

---

这应该行。

你能不能也在图库中发布HTML？它将有助于编写选择器的代码。基本上，您创建了一个通用的悬停函数，并使用

this

关键字来处理所讨论的图像。非常感谢，但这似乎不起作用。我稍微更改了它以适应代码，但运气不好？还有别的办法吗？你面临的问题是什么？我可以看到您对两个不同的图像使用相同的ID。最好改用class.Html:Images-Photos-css:#gal{width:400px；height:400px；margin:auto；}我根本无法让它工作，我不确定我做错了什么，不过谢谢你给了div#gal高度、宽度吗？我增加了一个高度，我是说这个$（文档）。ready（function（）{$（“#img1”）。hover（function（））{var img1=document.getElementById（“gal”）；gal.style.background=“url（images/img1.png），黑色”；$（“#img1”）.mouseout（函数（）{gal.style.background=“none”；}）；工作得很好，但对于我计划的照片数量来说，这根本是不切实际的，所以我很笨。非常感谢，但这两个似乎都不起作用。我已经针对每一个调整了我的代码，但没有运气。我是否有可能做错事或其他方式？我是说这$（document）。ready（function（）{$（“#img1”）。hover（function（））{var img1=document.getElementById（“gal”）；gal.style.background=“url（images/img1.png），黑色”；$（“#img1”）.mouseout（函数（）{gal.style.background=“none”；}）；效果很好，但我计划拍摄的照片数量太多，所以我很抱歉没有重复答案。只是在课堂等方面更具体一些。