写博客的时候经常需要给文章加入图片。有些图片太大,导致图片的最终呈现总是略小。为了保持大图片的原始信息量,需要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>

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

下载地址

百度网盘:https://pan.baidu.com/s/12T-qOuzBXZCcK0LeUKN3-g 提取码: 79cj

蓝奏云:https://ityh.lanzoui.com/iBhiEmkuftg