写博客的时候经常需要给文章加入图片。有些图片太大,导致图片的最终呈现总是略小。为了保持大图片的原始信息量,需要js来实现图像放大。
为了方便和快捷,我使用了zoom.js插件来支持博客图片的放大。Zoom.js是一个用于视觉连续图像放大的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
头像又没了