Zoomify插件 – jQuery实现的图片缩放效果(灯箱)

Zoomify是一个jQuery插件,适用于具有缩放效果的简单灯箱。

食用

首先,你必须引入jQuery文件

    <script src =“https://code.jquery.com/jquery-2.1.4.min.js”></script>

然后,你必须引入zoomify,下载:zoomify.js
(这个文件必须在jq后引入)

JS部分

    $('.wrap img').zoomify('zoom');//.wrap为你的父类名

(这个文件在zoomify后引入)

css部分

最后是灯箱的css:

    /*灯箱*/
    .zoomify { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; }
    .zoomify.zoomed { cursor: -webkit-zoom-out; cursor: zoom-out; padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; position: relative; z-index: 1501; }
    .zoomify-shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; z-index: 1500; background: rgba(0, 0, 0 , .1)/*这是点击后的遮罩颜色*/; opacity: 0; }
    .zoomify-shadow.zoomed { opacity: 1; cursor: pointer; cursor: -webkit-zoom-out; cursor: zoom-out; }

图片测试

本站采用CC BY-NC-SA 4.0协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://doub1.com/88.html 最后更新时间为:2019年03月14日

已有 4 条评论

  1. 跨境电商之家
    跨境电商之家 Chrome 71 10
    回复

    很好,赞一个!

    1. Summer
      Summer Chrome 71 10
      回复

      φ( ̄∇ ̄o)

  2. 菜鸟日记
    菜鸟日记 Chrome 63 7
    回复

    你18篇文章申请adsense通过了啊,我的一直在审核中

    1. Summer
      Summer Chrome 71 10
      回复

      当初12篇文章2天就过了,原创作品至少5篇吧(过了也没什么收益,网站没流量!)