用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果 自定义cnblogs样式小结

 一. 写在前面:

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

 

2.按照文中所述将代码放到相应位置(也就是页面定制CSS代码和页脚HTML代码两处) 并修改引用的zoom.js和zoom.css文件路径;

3.完成以上2步便可实现点击放大缩小的效果, 可是有个问题(也多是我模版问题), 点击图片后不能彻底显示, 右侧一部分被遮盖了, F12调试发现#topics外面还包着两层div, 正文最外层是#mainContent , 因此把这层的overflow属性值也设置成visible, 这样就行了.(美中不足是放大后的图片会变模糊 囧 =_=||....)

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

4.评论区有一兄dei提出了个问题, 就是代码+-号会出现问题, 问题及解决方案以下图.

代码:

<script type='text/javascript'>$(".code_img_closed").removeAttr("data-action");</script>
<script type='text/javascript'>$(".code_img_opened").removeAttr("data-action");</script>

 5.cnblgs自定义样式小结:自定义cnblogs样式小结

二. 如下是个人代码/文件及存放位置

详细设置代码:(博客主页>设置>)

css:(页面定制CSS代码)

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

 页脚html:(页脚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>

  如下是截图

 

 

点击图片验证:

 

三. 如下为转载正文.(很是详细了.)

转自:http://www.javashuo.com/article/p-sbglrkem-hd.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

 

 补充:能够采用lightbox 效果更好! https://lokeshdhakar.com/projects/lightbox2/

　　  demo:http://code.ciaoca.com/jquery/lightbox/

 

四.图片点击功能升级：http://www.javashuo.com/article/p-ktrtbmdf-he.html

 

五. 最后回顾一下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 属性来隐藏其内容。

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

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