菜单

用 zoom.js 给搜狐中央博物院文的图片增多单击时弹出放大成效

2019年5月17日 - 金沙前端

1.选择zoom.js

写博客时日常要插入图片。有个别图片尺寸太大,这产生图片最后的视觉显示总会略小。为了保留大图片的原来新闻量,需求用
js 来加多图片的放费用持。

为求方便飞快,笔者使用了 zoom.js 插件来兑现博客图片的放费用持。zoom.js
是1款视觉三番五次的图像放大 jQuery 插件。选取它的理由在于:

  1. 功效简洁美观
  2. 插件体量仅八kb
  3. 体验本人,放大后单击自便地点或滚动鼠标滚轮或按ESC键均可脱离放大状态

 

二.示范地址

 

三.行使方法

在 html 中引入 css 和 js 文件:

<!-- 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” 属性:

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

OK,就这样。

 

四.zoom.js与天涯论坛模板的体制争辩

博客园私有后台里申请到JS权限后,加多一句JS就可以兑现图片弹出:

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

 

然则可能晤面世与一些原有体制的争辩:

单击图片放大时,zoom.js 会给图片外包裹三个 <div> 标签作为全景遮罩,同时图片放大居中。可是今日头条模板的 #topics 成分(博文的容器成分)设置了溢出隐藏,会导致推广图片的某个不能表现出来。所以要重写 #topics 的照望样式:

#topics{ overflow: visible; }

  

如此那般图片放大就能够完全呈现了。但 #postDesc 成分的剧情(正是“posted
@ 2017-0捌-26 一7:57 xxxx 观望(xxxx) 商议(xxxx) 编辑
收藏”那壹行)又从 #topics 里面掉出来了。所以再加一句 css:

#postDesc{ float: none; } 

如此那般就好了。具体效果遵照自身的沙盘微调就行。

 

5.总结

zoom.js
的推广效应明显相比简单,相对适合博文图片。至于特别复杂的图纸管理,就要思考别的插件
or 本人写了。

 

参照链接:

zoom.js GitHub:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图