图片/图形
仿medium图片放大预览js插件
PetitQ
MediumLightbox 是一款支持移动端的仿 medium 图片放大预览 js 插件。该插件可以在用户点击页面中的图片时，将图片平滑过渡放大到屏幕中间显示。
使用方法
在页面中引入 mediumLightbox.js 和样式文件 style.css。
也想出现在这里？联系我们吧
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script src="mediumLightbox.js" ></script>
HTML 结构
为你的页面中需要放大显示的图片使用下面的 HTML 结构：
<figure class="half left zoom-effect">
<div class="aspectRatioPlaceholder" >
<div class="aspect-ratio-fill" style="padding-bottom: 50%;"></div>
<img class="img" data-width="900" data-height="450" src="image.jpg">
</div>
</figure>
其中，各个 data-属性的含义如下：
data-width：图片的实际宽度
data-height：图片的实际高度
带 aspect-ratio-fill class 的<div>元素被添加一个 padding-bottom 的样式，该样式中的百分比值的计算方法为：(height/width)*100。
初始化插件
在页面 DOM 元素加载完毕之后，可以通过 MediumLightbox()来实例化对象。
MediumLightbox('figure.zoom-effect');
该插件有一个可用的配置参数：
MediumLightbox('figure.zoom-effect', {
margin:40
});
margin：图片被放大是添加到图片上的 margin 值，默认为 20 像素。
Github 地址：https://github.com/davidecalignano/MediumLightbox
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
