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

 一. 写在前面

以下内容为zoom.js的实现方式,本博的图片放大功能已经升级,详细可参考博文:

博客园文章图片点击放大功能升级,有问题欢迎留言讨论。

 

 

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>

  以下是截图

 

 

点击图片验证:

 

三. 以下为转载正文.(非常详细了.)

转自: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{ overflowvisible; }

  

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

1
#postDesc{ floatnone; } 

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

 

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/

 

四.图片点击功能升级:https://www.cnblogs.com/yadongliang/p/10859206.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 属性来隐藏其内容。
如何设置浏览器来自动地处理溢出
本例演示如何设置浏览器来自动地处理溢出。
posted @ 2018-07-18 10:20  习惯沉淀  阅读(3197)  评论(19编辑  收藏  举报