Javascript:鼠标悬停缩略图以查看大图像-多个实例

Javascript: Mouseover thumbnail to view large image - Multiple instances

本文关键字：图像 实例 鼠标 悬停 略图 Javascript      更新时间：2023-09-26

我正在寻找一个javascript选项，该选项允许我将鼠标悬停在缩略图上以替换"大"图像。这里的技巧是使用缩略图链接中的锚href作为大图像源。我需要这个来处理多个实例。

如果有助于，则可以移除<img src="large1.jpg">等

下面是我正在使用的HTML代码的简化版本。此代码无法更改。

每个id和类都可以是唯一的。

<div class="image-1">
    <img src="large1.jpg">
</div>

<div id="thumbs">
    <a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
    <a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
    <a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>
... 
<div class="image-2">
    <img src="large2.jpg">
</div>
<div id="thumbs">
    <a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
    <a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
    <a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>
...

检查此解决方案http://jsfiddle.net/dtdaynjp/

添加到所有"大"图像唯一类，图像-1，图像-2，图像-3。

对于每个拇指链接添加类似于适当的大图像的类：拇指图像-1，拇指图像-2，拇指图像-1…

添加这个jQuery代码：

$(function() {
    $(".mouseover a").mouseover(function(){
        var src=$(this).attr('href');
        var classs=$(this).attr('class');
        classs=classs.substr(6);        
        $('.'+classs).find('img').attr('src',src);
    })
})

我只需要使用CSS :hover选择器。然后，您可以在图像中添加动画和其他很酷的东西。

这里的示例

相关文章：