<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页分享功能</title>
<style type="text/css">
body{margin: 0;}
.m-pop-bg{position: fixed; 100%;top: 0;bottom: 0;right: 0;overflow: auto; background-color: rgba(0,0,0,0.6);z-index: 9999;}
.m-pop{position:absolute;left:50%;top:50%; 320px; height: 310px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background-color:#fff;border-radius:4px;}
.m-pop-img{margin-top: 30px;text-align: center;}
.m-pop-footer{text-align: center;}
</style>
</head>
<body>
<div id="m-share">
<button id="m-wechat">微信二维码</button>
<button id="m-qzone">qq空间</button>
<button id="m-qq">qq好友</button>
<button id="m-weibo">新浪微博</button>
<button id="m-tieba">百度贴吧</button>
<button id="m-douban">豆瓣</button>
<button id="m-renren">人人</button>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
var initShare = function() {
$('#m-share').on('click', 'button', function(){
var that = $(this), conf = {},
name, title, summary, shareChannel, shareData = {};
var shareUrl = 'https://www.baidu.com/';
var gname = '快来看我投资的《官居几品》';
var summary = '我投资的作品，怎么可能不好看，免费资格送给你，快来体验吧！';
var img = 'http://coursecdn.cgyouxi.com/j/images/logo.png?v=20170804';
if(that.attr('id') === 'm-wechat'){
name = 'wechat';
shareChannel = 4;
shareData = {
url: shareUrl,
cid: '',
btn_type: 'flash'
}
} else if (that.attr('id') === 'm-qzone'){
name = 'qzone';
shareChannel = 2;
shareData = {
url : shareUrl,
title: gname,
desc: '超带感，根本停不下来！',
summary: summary,
img: img
}
} else if (that.attr('id') === 'm-qq'){
name = 'qq';
shareChannel = 3;
shareData = {
url : shareUrl,
title: gname,
desc: '',
summary: summary,
img: img
}
} else if (that.attr('id') === 'm-weibo') {
name = 'weibo';
shareChannel = 1;
shareData = {
url: shareUrl,
title: gname,
desc: '超带感，根本停不下来！',
summary: summary,
img: img
}
} else if (that.attr('id') === 'm-tieba') {
name = 'tieba';
shareChannel = 6;
shareData = {
url: shareUrl,
title: gname,
desc: '超带感，根本停不下来！',
summary: summary,
img: img
}
} else if (that.attr('id') === 'm-douban') {
name = 'douban';
shareChannel = 7;
shareData = {
url: shareUrl,
title: gname,
desc: '超带感，根本停不下来！',
summary: summary,
img: img
}
} else if (that.attr('id') === 'm-renren') {
name = 'renren';
shareChannel = 8;
shareData = {
url: shareUrl,
title: gname,
desc: '超带感，根本停不下来！',
summary: summary,
img: img
}
}
conf = {
platForm: 0,
shareChnnel: shareChannel
};
myShare(name, shareData, conf);
if ($('#qrdiv').length > 0) {
$('#qrdiv').css({'position': 'fixed'});
}
});
};
var init = function() {
initShare();
}();
var config = {
'weibo': 'http://service.weibo.com/share/share.php?title=#TITLE#&appkey=1343713053&pic=#PIC#&searchPic=false',
'qzone': 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=#URL#&showcount=1&desc=#DESC#&summary=#SUMMARY#&title=#TITLE#&site=橙光中心&pics=#PIC#&style=203&width=98&height=22',
'wechat': {cid: '', gindex: '', btn_type: ''},
'tieba': 'http://tieba.baidu.com/f/commit/share/openShareApi?url=#URL#&title=#TITLE#&desc=&comment=&pic=#PIC#',
'qq': 'http://connect.qq.com/widget/shareqq/index.html?url=#URL#&title=#TITLE#&desc=#DESC#&summary=#SUMMARY#&site=www.66rpg.com&pics=#PIC#',
'douban': 'http://www.douban.com/share/service?href=#URL#&name=#TITLE#&text=#SUMMARY#&image=#PIC#',
'renren': 'http://widget.renren.com/dialog/share?resourceUrl=#URL#&srcUrl=&title=#TITLE#&pic=#PIC#&description=#SUMMARY#',
};
var orgShare = {
share: function(name, obj, conf){
if(name != 'wechat'){
if(name == 'weibo'){
var url = config[name].replace('#TITLE#', encodeURIComponent(obj.title))
.replace('#DESC#', encodeURIComponent(obj.desc))
.replace('#SUMMARY#', encodeURIComponent(obj.summary))
.replace('#PIC#', encodeURI(obj.img));
} else {
var url = config[name].replace('#URL#', obj.url)
.replace('#TITLE#', encodeURIComponent(obj.title))
.replace('#DESC#', encodeURIComponent(obj.desc))
.replace('#SUMMARY#', encodeURIComponent(obj.summary))
.replace('#PIC#', encodeURI(obj.img));
}
orgShare.openWindow(url);
} else {
orgShare.makeQRcode(obj);
}
},
openWindow: function(url) {
window.open(url, "", "width=700, height=680, top=" + (screen.height / 2 - 340) + ", left=" + (screen.width / 2 - 350) + ", toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no");
return false;
},
makeQRcode: function(obj) {
var html = '<div id="m-pop-bg" class="m-pop-bg">' +
'<div id="m-pop" class="m-pop">' +
'<div class="m-pop-img" ><img src="http://www.66rpg.com/redirect/make_code_url?size=6&url=https://www.baidu.com/"></div>' +
'<div class="m-pop-footer">微信扫一扫即可分享给好友</div></div></div>';
$('body').append(html);
}
};
$(document).on("click", "#m-pop-bg", function () {
$("#m-pop-bg").remove();
})
$(document).on("click", "#m-pop", function (e) {
e.stopPropagation();
e.preventDefault();
})
var myShare = orgShare.share;
});
</script>
</body>
</html>
