效果圖:
===>
==>
里面還與很多屬性設置: 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俺)
