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

Show higher resolution images on hover

本文关键字：图像 高分辨率 显示 悬停      更新时间：2023-09-26

各位早上好。

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

，我知道它是否有用

我可以把所有小分辨率的图像放在一个名为images/small的文件夹中，把所有大图像放在名为images/larget的文件夹中。所以我们可以制作一个函数，只需将"images/small"更改为"images/large"

如有任何建议，将不胜感激

提前感谢

有很多插件是用JQuery/JavaScript编写的。我可以在这里列出一些我在各种项目中使用的

  1. 云缩放
  2. JQuery悬停加号插件
  3. AJAX缩放

我希望这对你有帮助。如果你愿意，你也可以写自己的插件，也可以用类似的方式。

jQuery Hover Pulse插件非常好，它完成了我过去需要的功能，看起来正是你想要的。用法也很简单：

看看这个jsFiddle，我做了一个演示给你

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.在文档底部的closing标记之前添加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 
    });
});
相关文章：