效果圖:

===>==>

里面還與很多屬性設(shè)置: index 關(guān)閉按鈕等等

代碼:

//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,//是否打開(kāi)右上角關(guān)閉按鈕
                hideClass: 'hideImg',//不需要顯示預(yù)覽的 class
                imgQuality: 'thumb',//圖片質(zhì)量類(lèi)型  thumb 縮略圖  original 默認(rèn)原圖
                slitherCallback: function (direction, DOM) {//左滑動(dòng)回調(diào) 兩個(gè)參數(shù) 第一個(gè)動(dòng)向 'left,firstClick,close' 第二個(gè) 當(dāng)前操作DOM
                setTimeout(function(){
                    // 為了一開(kāi)始居中顯示
                    $('.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

感謝 各位老板 小額打賞: (有問(wèn)題call俺)

總結(jié)

以上是生活随笔為你收集整理的jq移动端图片预览 (fly-zomm-img.js)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。