jQuery插件怎么显示图片缩略图

这篇文章主要介绍“jQuery插件怎么显示图片缩略图”，在日常操作中，相信很多人在jQuery插件怎么显示图片缩略图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery插件怎么显示图片缩略图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

今天，我们看看使用一个jQuery插件，实现图片缩略图的显示，并查看大图片。这样，当显示的图片非常大时，很有必要显示一张小图片，如果用户有兴趣查看大图片时，如果当用户点击时，能在当前页打开图片的话，这样可以很大的提高用户体验。下边，我们看看使用方法：

我们使用 Easy 来实现本篇的功能，通过简单的应用你就会发现这个插件能很好的达到我们的目的。首先我们在页面中引入jQuery文件、easy.js和main.js，后两个js文件可以从演示页中找到，也可以直接从Easy网站下载到。下边是简单的html：

<a href="large.jpg"><img src="small.jpg" class="popup" /></a>

默认的样式名为popup，如果我们改变了样式名的话，要在main.js中做相应的改变，比如样式名改变为pop，那么main.js中的代码应该改为如下：

$(document).ready(function(){      $.easy.popup(".pop"); });

如果要创建一个图片集的话，也就是相关的几张图片时，我们要在样式中加入一个gallery名，如下：

<div>     <a href="anyixuan01.jpg" class="popup gallery">         <img src="anyixuan1.jpg">     </a>     <a href="anyixuan04.jpg" class="popup gallery">         <img src="anyixuan4.jpg">     </a>    </div>

我这里为了省事，直接从原来项目里粘了一段，建议大家规范的将a标签放置在无序列表中。

如果要创建另一个图片集时，应该写为如下的形式，这里不做过多的说明了。怎么写是很清晰的，具体可以到演示页看看效果。好了，easy.js的用法就说到这里，有了它我们可以在自己的网站中加入图片预览效果，提高了网站的用户体验。

到此，关于“jQuery插件怎么显示图片缩略图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！