效果圖:

===>==>

里面還與很多屬性設置: 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,//是否打開右上角關(guān)閉按鈕
                hideClass: 'hideImg',//不需要顯示預覽的 class
                imgQuality: 'thumb',//圖片質(zhì)量類型  thumb 縮略圖  original 默認原圖
                slitherCallback: function (direction, DOM) {//左滑動回調(diào) 兩個參數(shù) 第一個動向 '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俺)

總結(jié)

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

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