帮你打开活字格更神奇的功能：六十四，朋友圈分享效果
遮罩功能已经分享给大家很久了，应用最多的应该属于页面跳转，加载时间过长的动画等等。今天，我为大家演示一个新花样。相信大家都见过微信中的广告，分享朋友圈的功能。接下来我先给大家展示下效果：
那么这个功能是怎么实现的呢？请大家和我一起向下看。
1.首先，需要在活字格资源文件中引用第三方的JS库
2.将需要弹出的图片隐藏的页面辅助单元格中，并起名为pictureUrl。
3.给页面左上角A1单元格起名为message。
4.在手机页面底部菜单栏中编辑JS命令
代码如下：
var p = Forguncy.Page;
var imgUrl = p.getCell('pictureUrl').getValue();
$('#r0c0p').empty();
$('#r0c0p').append('<p><img src=' + imgUrl + ' width="100%" height="100%"></p>');
$.blockUI({
css: {
border: 'none',
padding: '15px',
top: '50%',
left: '50%',
width: '80%',
transform: 'translate(-50%,-50%)',
backgroundColor: 'black',
color: '#ffffff',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .8
},
message: $('#r0c0p')
}
);
$('.blockUI').off('touchstart', $.unblockUI);
$('.blockUI').on('touchstart', $.unblockUI); 配合第三方的UI样式，我们就可以实现朋友圈的分享效果了～:itwn:
工程文件见附件
页:
[1]