fly-zomm-img.js - jquery移动端图片预览插件,点击放大图片
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

fly-zomm-img是一款简单的移动端图片预览插件，点击图片可以预览大图效果,移动端使用效果更好可以实现左右拖动，电脑端图片显示大小可以自己设置，案例如下

下面代码加在网页head里面

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

html代码

<div class="pabout-info">
    <img src="images/1.png" /><img src="images/2.jpg" /><img src="images/3.png" />
</div>
<style>
    .fly-zoom-box-img
    {
        /*设置预览大图css*/
    }
</style>
<script src="js/fly-zomm-img.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        $('.pabout-info').FlyZommImg({
            rollSpeed: 200, //切换速度
            miscellaneous: true, //是否显示底部辅助按钮
            closeBtn: true, //是否打开右上角关闭按钮
            hideClass: 'hide', //不需要显示预览的 class
            imgQuality: 'thumb', //图片质量类型  thumb 缩略图  original 默认原图
            slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
                //console.log(direction,DOM);
            }
        });
    });
</script>