Question

早上好。

我只想在悬停较低分辨率图像时显示较高分辨率的图像。我想创建一个规则或任何类型的函数可以动态地完成这项工作，我的意思是我不能只是在每个图像上放置一个悬停效果并在每个地方更改src。

我知道它是否有用，

我可以将所有小分辨率图像放在名为images / small的文件夹中，将所有大图像放在名为images / large的文件夹中，这样我们就可以创建一个可以改变的功能，只需更改“images / SMALL “to”images / LARGE “

任何建议都将不胜感激

提前致谢

Answer 1

有很多插件可用，用JQuery / JavaScript编写。我可以在这里列举一些我用于各种项目的文件

Cloud Zoom
JQuery HoverPluse Plugin
AJAX-Zoom

我希望这会对你有所帮助。如果你想要，你也可以编写自己的插件，可以采用类似的方式。

Answer 2

jQuery Hover Pulse插件相当不错，它已经完成了我过去所需要的，看起来就像你在寻找它。用法也很简单：

Check out this jsFiddle I made as a demo for you

<强> 1。包括jQuery和悬停脉冲插件

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.com/jquery/hoverpulse/jquery.hoverpulse.js"></script>
</head>

<强> 2。将类或ID添加到您的图片以用作选择器

<div id="thumbs">
                <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach1.jpg" width="64" height="64" /></div>
                <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach2.jpg" width="64" height="64" /></div>
                <div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach3.jpg" width="64" height="64" /></div>
    </div>

第3。在clossing标记之前的文档底部添加jQuery代码。

$(document).ready(function() {
    $('div.thumb img').hoverpulse({
        size: 40,  // number of pixels to pulse element (in each direction)
        speed: 400 // speed of the animation 
    });
});

在悬停时显示更高分辨率的图像

2 个答案: