码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-11-05 10:49:49      阅读:888      评论:0      收藏:0      [点我收藏+]

标签:https   lsp   底部   jpg   call   href   http   cal   index   

效果图:

技术图片===>技术图片==>

 

技术图片

 

 

 

 

 

里面还与很多属性设置: 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俺)

技术图片

 

              技术图片

 

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

标签:https   lsp   底部   jpg   call   href   http   cal   index   

原文地址:https://www.cnblogs.com/520BigBear/p/11796961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!