手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

fancybox with touchswip

首页 > Javascript >

Submitted by gouki on 2016, February 25, 2:52 PM. Javascript

 不多说，直接上代码，其实就是让Facybox支持手指滑动。。。fancybox3已经支持了，不过他的样式太丑了。。这个的样式设计的有点象微信。。。有意思

JavaScript代码
  1. $(document).ready(function() {  
  2.   
  3.     $('.js-fancybox').fancybox({  
  4.         width: "100%",  
  5.         margin: [0, 0, 0, 0],  
  6.         padding: [0, 0, 0, 0],  
  7.         openEffect  : 'none',  
  8.         closeEffect : 'none',  
  9.         prevEffect : 'fade',  
  10.         nextEffect : 'fade',  
  11.         closeBtn  : false,  
  12.         arrows: false,  
  13.         helpers : {  
  14.             title : null,  
  15.             overlay : {  
  16.                 css : {  
  17.                     'background' : 'rgba(0, 0, 0, 0.95)'   
  18.                 }  
  19.             },  
  20.             buttons : {  
  21.             }  
  22.         },  
  23.         afterShow: function() {  
  24.             $('.fancybox-wrap').swipe({  
  25.                 swipe : function(event, direction) {  
  26.                     if (direction === 'left' || direction === 'up') {  
  27.                         $.fancybox.prev( direction );  
  28.                     } else {  
  29.                         $.fancybox.next( direction );  
  30.                     }  
  31.                 }  
  32.             });  
  33.         },  
  34.         afterLoad : function() {  
  35.         }  
  36.     });  
  37.       
  38. });  
原文地址参考 ：http://codepen.io/frontendstudio/pen/cixjm

 

 



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):