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

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

插件介绍

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="http://static.zzyzan.com/qiniu/8671/image/0d5b1c4c7f720f698946c7f6ab08f687.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
    </div>
</figure>

其中,各个data-属性的含义如下:

  • data-width:图片的实际宽度。
  • data-height:图片的实际高度。

初始化插件

在页面DOM元素加载完毕之后,可以通过MediumLightbox()来实例化对象。

MediumLightbox('figure.zoom-effect');

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

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

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

下载 在线预览 积分 (-1) 吐槽 (1)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/pic/8671.html

- 评论

  • 加载中,请稍候…
我要吐槽