帮你打开活字格更神奇的功能：六十四，朋友圈分享效果

遮罩功能已经分享给大家很久了，应用最多的应该属于页面跳转，加载时间过长的动画等等。
今天，我为大家演示一个新花样。相信大家都见过微信中的广告，分享朋友圈的功能。接下来我先给大家展示下效果：




那么这个功能是怎么实现的呢？请大家和我一起向下看。
1.首先，需要在活字格资源文件中引用第三方的JS库


2.将需要弹出的图片隐藏的页面辅助单元格中，并起名为pictureUrl。


3.给页面左上角A1单元格起名为message。


4.在手机页面底部菜单栏中编辑JS命令

代码如下：

1. var p = Forguncy.Page;
   
2. var imgUrl = p.getCell('pictureUrl').getValue();
   
3. 
   
4. $('#r0c0p').empty();
   
5. $('#r0c0p').append('<p><img src=' + imgUrl + ' width="100%" height="100%"></p>');
   
6. 
   
7. $.blockUI({
   
8.     css: {
   
9.         border: 'none',
   
10.         padding: '15px',
    
11.         top: '50%',
    
12.         left: '50%',
    
13.         width: '80%',
    
14.         transform: 'translate(-50%,-50%)',
    
15.         backgroundColor: 'black',
    
16.         color: '#ffffff',
    
17.         '-webkit-border-radius': '10px',
    
18.         '-moz-border-radius': '10px',
    
19.         opacity: .8
    
20.     },
    
21.     message: $('#r0c0p')
    
22.     }
    
23. );
    
24. 
    
25. $('.blockUI').off('touchstart', $.unblockUI);
    
26. $('.blockUI').on('touchstart', $.unblockUI);

复制代码

配合第三方的UI样式，我们就可以实现朋友圈的分享效果了～
工程文件见附件