jquery给文章图片加上点击放大

写博客的时候经常需要给文章加入图片。有些图片太大，导致图片的最终呈现总是略小。为了保持大图片的原始信息量，需要js来实现图像放大。

为了方便和快捷，我使用了zoom.js插件来支持博客图片的放大。Zoom.js是一个用于视觉连续图像放大的jQuery插件。

jquery给文章图片加上点击放大

1、效果简单美观

2、插件体积小，只有8kb

3、体验友好，放大后单击任意位置，或滚动鼠标滚轮或按下ESC键都可以退出放大

一个简单的jQuery图像缩放插件，未压缩大小为8K，很好调用。

使用方法

1、将 zoom.js 和 zoom.css 文件链接到您的网站或应用程序。

<linkhref="css/zoom.css"rel="stylesheet">
<scriptsrc="js/zoom.js"></script>

2、zoom.js依赖于transition.js文件，所以一定要调用。

<script src="js/transition.js"></script>

也可以选择国内cdn调用

<!-- Bootstrap 的 transition.js cdn（过渡动画插件）-->
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>

3、然后给要放大的图片标签添加 data-action="zoom" 属性

<img src="img/blog_post_featured.png" data-action="zoom">

OK，就这样。

我们如果想让全站的图片都加上data-action属性，可以使用动态js方法来给文章页图片加属性，代码如下：

<script type="text/javascript">
$(function(){
$(".post-content img").each(function(){
$(this).attr("data-action","zoom");
})
})
</script>

可以点击这篇文章的图片看看，就是最终的呈现效果！