支持移动端的仿medium图片放大预览js插件

纯js 手机 移动端 图片放大 2016-09-13

控件介绍
MediumLightbox是一款支持移动端的仿medium图片放大预览js插件。该插件可以在用户点击页面中的图片时,将图片平滑过渡放大到屏幕中间显示。
浏览器兼容

支持IE10+

演示下载 750
使用方法

使用方法

在页面中引入mediumLightbox.js和样式文件style.css。

1
2
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script src="mediumLightbox.js" ></script>               
HTML结构

为你的页面中需要放大显示的图片使用下面的HTML结构:

1
2
3
4
5
6
<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()来实例化对象。

1
MediumLightbox('figure.zoom-effect');                 

该插件有一个可用的配置参数:

1
2
3
MediumLightbox('figure.zoom-effect', {
    margin:40
});            

margin:图片被放大是添加到图片上的margin值,默认为20像素。

MediumLightbox图片放大插件的github地址为:https://github.com/davidecalignano/MediumLightbox

本文转载请注明出处:http://www.zhuiye.com/detail_779.html