1、选择zoom.js写博客时常会添加图片。有些图片尺寸太大,这导致图片最终的视觉呈现总会略小。为了保留大图片的原有信息量,这个就需要用 js 来添加图片的放大支持。为求简单方便直接快,我使用了 zoom.js 插件来实现博客图片的放大支持。zoom.js 是一款视觉连续的图像放 ...
1、选择zoom.js
写博客时常会添加图片。有些图片尺寸太大,这导致图片最终的视觉呈现总会略小。为了保留大图片的原有信息量,这个就需要用 js 来添加图片的放大支持。
为求简单方便直接快,我使用了 zoom.js 插件来实现博客图片的放大支持。zoom.js 是一款视觉连续的图像放大 jQuery 插件。选择它的理由在于:
- 效果简洁美观
- 插件体积仅有8kb
- 一句 js 调用实现图片放大支持
2、演示地址
https://fat.github.io/zoom.js/
3、实现
在 html 中引入 css 和 js 文件:
<!-- zoom.js 的样式 --><link rel="stylesheet" type="text/css" href="css/zoom.css"><!-- jQuery 的 cdn --><script src='/images/loading.gif' data-original="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script><!-- Bootstrap 的 transition.js cdn(过渡动画插件)--><script src='/images/loading.gif' data-original="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script><!-- zoom.js 核心代码 --><script src='/images/loading.gif' data-original="./js/zoom.js"></script>
然后给要放大的图片标签添加 data-action="zoom" 属性:
<img src='/images/loading.gif' data-original="./image/demo.jpg" data-action="zoom">
OK,就这样。
4、zoom.js与博客园模板的样式冲突
单击图片放大时,zoom.js 会给图片外包裹一个 <div> 标签作为全景遮罩,同时图片放大居中。但是博客园模板的 #topics 元素(博文的容器元素)设置了溢出隐藏,会导致放大图片的部分无法呈现出来。所以要重写 #topics 的相应样式:
#topics{ overflow: visible; }
这样图片放大就能完全显示了。不过, #postDesc 元素的内容(就是“posted @ 2017-08-26 17:57 xxxx 阅读(xxxx) 评论(xxxx) 编辑 收藏”这一行)又从 #topics 里面掉出来了。所以再加一句 css:
#postDesc{ float: none; }
这样就好了,放张图看看:
5、总结
zoom.js 的放大效果显然比较简单,相对适合博文图片。至于更加复杂的图片放缩,就要考虑别的插件 or 自己写了。
参考链接 GitHub:https://github.com/fat/zoom.js
原标题:用 zoom.js 给博客园中博文的图片添加单击时弹出放大
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。