<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片查看器</title> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta content="yes" /> <meta content="black" /> <meta content="telephone=no,email=no,adress=no"> <link href="https://www.jb51.net/css/molong.css"> </head> <body> <ul> <li big-url="imges/1.jpg"><div></div></li> <li big-url="imges/2.jpg"><div></div></li> <li big-url="imges/3.jpg"><div></div></li> </ul> <ul> <li><input type="button" value="addImg"/></li> <li><input type="button" value="closeImg"/></li> </ul> <script src="https://www.jb51.net/js/zepto.min.js"></script> <script src="https://www.jb51.net/js/touch.min.js"></script> <script src="https://www.jb51.net/js/molong.js"></script> <script> $(function(){ //添加大图容器 var screenHeight=window.innerHeight; var screenWidth=window.innerWidth; var minImageWidth=screenWidth*0.25;//显示小图的宽高 var mySwipe=new molong.photoSwipe({listContainer:$("#imgList")}); mySwipe.init(); //关闭图片查看器 $("#addClose").on("tap",function(){ mySwipe.hideBigImg(); }); $("#addBtn").on("click",function(){ console.log(this); var addImg1='<li big-url="imges/4.jpg"><div></div></li>'; mySwipe.listContainer.append(addImg1); mySwipe.listContainer.find(".img-bg").width(minImageWidth); mySwipe.listContainer.find(".img-bg").height(minImageWidth); }) //显示大图监听 mySwipe.listen("listenShow",function(){ alert("打开大图"); }); //关闭大图监听 mySwipe.listen("listenHide",function(){ alert("关闭大图"); }); }); </script> </body> </html>
基于touch.js手势库+zepto.js插件开发图片查看器（滑(2)
内容版权声明：除非注明，否则皆为本站原创文章。