jq移动端图片预览 (fly-zomm-img.js)

Posted 2020-11-30 大熊

效果图:

===>==>

 

 

 

 

 

 

里面还与很多属性设置: index  关闭按钮等等

代码:

//html-----------------------

<div class="headerPic" id="headerPic">
                <img src="https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_1.jpg" alt="">
            </div>


//js--------------------------

$(\'#headerPic\').FlyZommImg({
                rollSpeed: 200,//切换速度
                miscellaneous: false,//是否显示底部辅助按钮
                closeBtn: true,//是否打开右上角关闭按钮
                hideClass: \'hideImg\',//不需要显示预览的 class
                imgQuality: \'thumb\',//图片质量类型  thumb 缩略图  original 默认原图
                slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 \'left,firstClick,close\' 第二个 当前操作DOM
                setTimeout(function(){
                    // 为了一开始居中显示
                    $(\'.fly-zoom-box-img\').css(\'width\',\'100%\').css(\'height\',\'auto\').css(\'top\',0).css(\'bottom\',0).css(\'margin\',\'auto\');
                },300)
                }
            });

引入jq,  和fly-zomm-img.js====>  链接:https://github.com/Clearlovesky/-js-jq-/blob/master/fly-zomm-img.js

 

感谢 各位老板  小额打赏:   (有问题call俺)