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像素。
MediumLightbox图片放大插件的github地址为:https://github.com/davidecalignano/MediumLightbox
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!