用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果

写在前面:

1.下载好js和css文件后上传到cnblogs(下载地址);

2.按照文中所述代码放到相应位置并修改引用的zoom.js和zoom.css文件路径;

3.以上2步可以实现点击放大缩小的效果, 但是有个问题(也可能是我模版问题), 点击图片后不能完全显示, 右侧一部分被遮盖了, F12调试发现#topics外面还包着两层div, 正文最外层是#mainContent , 所以把这层的overflow属性值也设置成visible, 这样就好了.

/*溢出隐藏设置*/
#topics, #mainContent {
    overflow: visible;
}

================================我的代码.================================

详细设置代码:

css:

/*溢出隐藏设置*/
#topics, #mainContent {
    overflow: visible;
}
#postDesc {
    float: none;
}

页脚html:

<!-- zoom.js 的样式 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yadongliang/zoom.css">
<!-- jQuery 的 cdn -->
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap 的 transition.js cdn（过渡动画插件）-->
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<!-- zoom.js 核心代码 -->
<script src="https://blog-static.cnblogs.com/files/yadongliang/zoom.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>

点击图片验证:

================================以下为转载正文.================================

转自:https://www.cnblogs.com/mingc/p/7446492.html

1.选择zoom.js

写博客时经常要插入图片。有些图片尺寸太大，这导致图片最终的视觉呈现总会略小。为了保留大图片的原有信息量，需要用 js 来添加图片的放大支持。

为求方便快捷，我使用了 zoom.js 插件来实现博客图片的放大支持。zoom.js 是一款视觉连续的图像放大 jQuery 插件。选择它的理由在于：

1. 效果简洁美观
2. 插件体积仅8kb
3. 体验友好，放大后单击任意地方或滚动鼠标滚轮或按ESC键均可退出放大状态

 

2.演示地址

https://fat.github.io/zoom.js/

 

3.使用方法

在 html 中引入 css 和 js 文件：

1 2 3 4 5 6 7 8

<!-- zoom.js 的样式 --> < link  rel="stylesheet" type="text/css" href="./css/zoom.css"> <!-- jQuery 的 cdn --> < script  src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></ script > <!-- Bootstrap 的 transition.js cdn（过渡动画插件）--> < script  src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></ script > <!-- zoom.js 核心代码 --> < script  src="./js/zoom.js"></ script >

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

1	< img  src="./image/demo.jpg" data-action="zoom">

OK，就这样。

 

4.zoom.js与博客园模板的样式冲突

博客园个人后台里申请到JS权限后，添加一句JS即可实现图片弹出：

1	<script type= 'text/javascript' >$( '#cnblogs_post_body img' ).attr( 'data-action' ,  'zoom' );</script>

 

但是可能会出现与某些原有样式的冲突：

单击图片放大时，zoom.js 会给图片外包裹一个 <div> 标签作为全景遮罩，同时图片放大居中。但是博客园模板的 #topics 元素（博文的容器元素）设置了溢出隐藏，会导致放大图片的部分无法呈现出来。所以要重写 #topics 的相应样式：

1	#topics{  overflow :  visible ; }

　　

这样图片放大就能完全显示了。但 #postDesc 元素的内容（就是“posted @ 2017-08-26 17:57 xxxx 阅读(xxxx) 评论(xxxx) 编辑 收藏”这一行）又从 #topics 里面掉出来了。所以再加一句 css：

1	#postDesc{  float :  none ; }

这样就好了。具体效果根据自己的模板微调就行。

 

5.总结

zoom.js 的放大效果显然比较简单，相对适合博文图片。至于更加复杂的图片处理，就要考虑别的插件 or 自己写了。

 

参考链接：http://www.shejidaren.com/zoom-js.html

zoom.js GitHub：https://github.com/fat/zoom.js

 

================================最后回顾一下css的overflow属性.================================

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

默认值：	visible
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

TIY 实例

如何使用滚动条来显示元素内溢出的内容

本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。

如何隐藏溢出元素中溢出的内容

本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。

如何设置浏览器来自动地处理溢出

本例演示如何设置浏览器来自动地处理溢出。