phpcms网页js实现微信，qq，qq空间，微博分享功能
css部分：
<style>
.share-list{
position: fixed;
top: 200px;
width: 1200px;
padding: 0 19%;
}
.share-list ul li{
line-height:55px;
}
.share-container li{
position: relative;
float: left;
width: 23px;
height: 23px;
margin-left: 5px;
margin-top: 20px;
}
.share-container li a{
display: inline-block;
width: 100%;
height: 23px;
}
.share-container li a img{
width: 100%;
}
.bds_weixin:hover .wechat-share{
display: block;
}
.wechat-share img{
width: 100%;
}
.share-list ul li div.wechat-share{
display:none;
position: absolute;
left:16%;
top: 100px;
width: 120px;
height: 180px;
padding: 20px 20px 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
}
.share-list ul li div.wechat-share p{
display:block;
line-height:2;
}
.js_qrcode_close{
width: 15px;
height: 15px;
position: absolute;
right: 2px;
top: 2px;
background: url(/statics/images/qrcode/sprite.png) no-repeat -156px -156px;
}
</style>
html部分：
<div class="share-list">
<span class="post_top_share_title">分享至</span>
<ul class="share-container">
<li>
<a href="javascript:void(0)" class="bds_weixin">
<img src="/statics/images/share/wechat.png">
</a>
<div class="wechat-share" id="qrcode" title="https://www.cnfisher.com/2024/renwangzixun_0827/98966.html"><a href="javascript:;" target="_self" class="js_qrcode_close" title="关闭"></a>
<canvas width="120" height="120" style="display: none;"></canvas><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAAXNSR0IArs4c6QAACWFJREFUeF7tndl240AIROP//+jM8aKxZEHfKlpekjBPc9JSLxQFBZLt09fX1/fXAf++v/fTnE6n/zOvx5e/R38737D8Pbuftru+L7o2mn99nbp+dX/LWmQfOqcyfkagAX6w1K8EOGIgeQh5YDZnxOD1WrMMjxicRYtlXRqPGJ7Zp3I+Oj9hEd1//tt/BjfA90CmhvgGOMjLF6+65WaH4VG0oAiSsa7C8F/FYNWDSWTMAkBRJdsnCb4oLFMIJAdzRNqsg4+E45pAaYhugPcmbIChTHq2h2ciY8RWikDZnBRZKmWQU0Z+JIMb4LGIa4BXHqLmMBJGzeBEeVQaARRWonESUaQVSDjNOgCJyGptTX0AsuV6X2EdTIZrgK8mboBXvWjyumbwPkfPRoC3dbLU0EkhOpuHcnSkckkEOuF8pNyVs6v7p/M3wEmEUZ82VUqztwGsLDy6xpH5lMNJZPyV+2cx2TB4drIGWM+hqoPOYtIAP+mFhKMi0CEAf6t9N2M19YDGlGFJopZzihhRH1Cc51KvJdM6jRbHVhtt0ABfzaGC5lzbABtu6TzNUcsUYpBTptEz5uiotL5hnvTSk8pgCodOneiwRQWLShYyFonEaH6nERGtTy88kE2zM2/21QDvQzQ1GkhjkDOR0x4ZDYZvVZKHOuPqoRUmqrmtyhAV4IxhdP9yn9PLJrukZx29NusAWPE6At3JgRRCHQMRQHRWur8BvlmgAY5fWScH2ziz+uI7CSNnnAQbzRXlMJqTooW65rpMohDrhHDaP0XTdK0GeC+yohAaGbABhlZgxiqVTY5XN4NXFqgY2BExFYYQg5xxqkkpx1XGKw7m2DSNJlGIboDvn4pU8/1sNFFLP8rra41w/r/8TtbsASoeTDmO9lStg2mvlTKH2pIVkZWdf/P3hcGOsWgzqoEyb5w1YMQ6J9yp+686oBohia0NMHz4jRyMgP4RAM/0osmDZhsVVZW97KsaFo+6P9u/KtLIvuSAlxzcAO/N1ADfbEIe1gyOOfYWBpNwqoiwyj1rme/kuMiU1fsrDwsoXM6WQZFIpDk3IboBvpvwVwE8anTMgk4q1WFYdC2lAGd+KqOis1TnJ7ZTmUj3r/cVPvCPREY0KYXgBnjuG6qoClBUegMcWEmNXD+CwUuZpCo7pTaNchiF2CgakIiYDdFHdIpG4o4iHJ2PGErzo8hSJlg2QQA1wOMHGJRXSUVnzv6/0dEM9j9bNMuwlzC48tKd2iw/shHiCA7KoSpb6GkUAUQ52kkRDoPDp0mOSm6Ar+H2RwA86kU/ywOjOo/qTGKdoxecuT5dRCExG+C9iVRmklPRPLM5XKpoGuBfDvDMGx3koY4wIhExCpWPY7OP+yiEj0pD5d6KhqF50zKpASbT5eMUopUQOtIjRKCIFI9rTr10RxtoBscQv5TBo1Zl3bfHd6ohlDy0yiBSnhGraK3ZTp5ja9VBznMOO1nOos61DfC1a1ZtyBwGMHWiSOZXQM8O7qSDSASRSHMYSgync1NbWN0rPWxBBjfAd1MTa8gBnXTTAAcWOIoVTgSZFZHrY5CD0NO4bK7hA//M6yiHqrmFmvlZqFONQRGIAFJCYCVckzPS8/QoBaVt5cqHzxpg/Wf8KNyOwHJ0QQMcfFb5zzKYVGAlRJInUx1Je4rSibpPZW6aS5kjCucVxU/34FuVtFk6bJRDGuC7BSgHk61KAKugEfjKuFpy0PNoylHKXkbGovWfpYLVfZOIvFQE0cMG1YPUjTxe1wDPdbJKKroZrCvj2RAbVSEVspQZXKnDaINVxToTQp0QTiLP2X8FQDWqkZ0fx4ePC8lAxPpI2Z7/RoeJDkH3OADR/OTg6l7Uho9iE8fWG7uPHvg3wPHvDf4ogKN3shzPIzZEtZ8awsjBSMWSCqYcRmE5i1AURlUHofkVVodf4dAA71UuGdOx2UsBPurzwZG3EUPI07NxaqSQsWfBIoCoERFFNbKFs+eN3RvgvWkrDjJbOjXAKws0g8dOGTLYKTNUkZSJIGKI6s2z89D+srBIZZS6f7qOzqekwFId3ADvP3xGYJDij8CmORtgoshqnCKYIyJpWRJMqgizAK54WLVOoxBHKrUyXt0rgTUad+poYnC1JyC/k0UHdVRkA0zWvI5ToyabZeMM6pewOB5G26fcEt3vsJZUtnqWbJ+qBqFQTAyv2Ol8tgY4QDgydgOc/OhGM/hqgY9g8OiNDsoBTuKviDgnRNFeHGMve63OOZsijlr/kscb4L2gOcrA5FSOsq+I2AZ4ZWEyII1HYH0EwJXnwZGKJJWrKuN1eUAGohRCWoBCMN2fpR21DKT9K42MZQ/pXA1wHqJ/BcAzr81SM94RViSonAihMt/Zf3QWYiCdn85MEYLmxxzsiIDqtVGIUcM51akZA0nlkuEpRan5mtZpgFd1uOLNj870Jxhc+VkdatWp45TjZkMgMdhhiBpVskhGT6uok0b3p2dtgK+mqShqNddn85NKJgen9S85uAH+IwBXEz7VYaNx8lAK4Q7rqtdGeyAR9Yw6mGyR4Vf6niwqWdTxBvj+Nf/VHEtViNyLpjrwSBFCrCEHIm+nvVI0o9yn3k/X0TloH5ccrD5saIDvFiDDEnBUZRCwyzjtowFeWfLZObpCEAJaAlhV0bRYVP85ZQAZgACo5LBMA6jCkWxy5PwUFSL7WWUSHaYB3luoAYZWo6Oym8GxRghfm3XYGiX8Z9SJWQgalQnVFEEihh5WqCGeHJjSUobT5r7RD2M5QNNmiGHUi22A9z+NZwGsKLLHCR0PjDZDOYoc7F3rU6dKjWrktJGuOf+NsFrbRf6eLAego0JYA3y3gEOGBvhmN8doTpXw8QymmivqxDg5eCSMlBBE0YSYH407Yc+5drQW2VnJsXRW+Wd1onxBOZByTHZAMmADrP90fAN88xZyKiecEzNne9G01006UX/5zGGwGoKdCEChqDKeGepVIjFTyZTDKUU2wMDaBvj7mC8Kc4SZ2h3LRJoTYtUIRHWqs6ZzPkckPiUHqyKoAY7rXArRDfAtwhDDKG87Kp9arSSMXspgOngUwugAkbGrDH6GCiXl65R86v4qNqN9PGL3lFYlOchsL1c1oNMoaIADazkiohm8N+BLGUyso/Fos1UHoLVIxBHDK+OUTmjPDpiUAqmMCx820AZpvAEeW6gBJg+CcVKxkTghlXxkp+1dAP8DVtLvB/ahEgwAAAAASUVORK5CYII=" style="display: block;"><p>用微信扫码二维码</p><p>分享至好友和朋友圈</p></div>
</li>
<li>
<a title="分享到新浪微博" href="javascript:void(0)" class="share_xlwb" onclick="shareToSinaWB(event)">
<img src="/statics/images/share/weibo.png">
</a>
</li>
<li>
<a title="分享到QQ好友" href="javascript:void(0)" class="share_qq" onclick="shareToqq(event)">
<img src="/statics/images/share/qq.png">
</a>
</li>
<li>
<a title="分享到QQ空间" href="javascript:void(0)" class="share_qzone" onclick="shareToQzone(event)">
<img src="/statics/images/share/qq_zone.png">
</a>
</li>
</ul>
</div>
js部分：
<script>
var _title = '中国钓鱼人网 CNFISHER.COM 整站出售，如果您也是爱站之人';
var _desc = '各位， 由于本人精力有限，我想将此平台转手给有时间、有能力，愿意为这个平台投入的爱站之人或钓鱼玩家。希望平台能在阁下的手上发扬 ';
var _url = 'https://www.cnfisher.com/2024/renwangzixun_0827/98966.html';
var _pic = 'https://www.cnfisher.com/uploadfile/2024/0827/20240827112413132.gif';
var _source = '';
var _sourceUrl ='';
var _shareUrl = '';
var _showcount = '';
var _summary = '';
var _site = '';
//分享至微信 css控制二维码隐藏和出现
//分享到新浪微博
function shareToSinaWB(event){
event.preventDefault();
var _shareUrl = 'https://service.weibo.com/share/share.php'; //真实的appkey，必选参数
_shareUrl += '?url='+ encodeURIComponent(_url||document.location); //参数url设置分享的内容链接|默认当前页location，可选参数
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //参数title设置分享的标题|默认当前页标题，可选参数
_shareUrl += '&source=' + encodeURIComponent(_source||'');
_shareUrl += '&sourceUrl=' + encodeURIComponent(_sourceUrl||'');
_shareUrl += '&appkey=' + '1580730830';
_shareUrl += '&content=' + 'utf-8'; //参数content设置页面编码gb2312|utf-8，可选参数
_shareUrl += '&pic=' + encodeURIComponent(_pic||''); //参数pic设置图片链接|默认为空，可选参数
window.open(_shareUrl,'_blank');
}
//分享到QQ空间
function shareToQzone(event){
event.preventDefault();
var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
_shareUrl += 'url=' + encodeURIComponent(_url||document.location); //参数url设置分享的内容链接|默认当前页location
_shareUrl += '&showcount=' + _showcount||0; //参数showcount是否显示分享总数,显示：'1'，不显示：'0'，默认不显示
_shareUrl += '&desc=' + encodeURIComponent(_desc||'分享的描述'); //参数desc设置分享的描述，可选参数
_shareUrl += '&summary=' + encodeURIComponent(_summary||'分享摘要'); //参数summary设置分享摘要，可选参数
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //参数title设置分享标题，可选参数
_shareUrl += '&site=' + encodeURIComponent(_site||'中国钓鱼人网'); //参数site设置分享来源，可选参数
_shareUrl += '&pics=' + encodeURIComponent(_pic||''); //参数pics设置分享图片的路径，多张图片以＂|＂隔开，可选参数
window.open(_shareUrl,'_blank');
}
//分享到qq
function shareToqq(event){
event.preventDefault();
var _shareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?';
_shareUrl += 'url=' + encodeURIComponent(_url||location.href); //分享的链接
_shareUrl += '&title=' + encodeURIComponent(_title||document.title); //分享的标题
window.open(_shareUrl,'_blank');
}
</script>
<script type="text/javascript" src="/statics/js/qrcode/qrcode.min.js"></script>
<script>
$(function(){
$('.bds_weixin').click(function(){
$('.wechat-share').toggle();
})
})
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 120,
height : 120
});
function makeCode () {
var url = 'https://www.cnfisher.com/2024/renwangzixun_0827/98966.html';
$('#qrcode').prepend('<a href="javascript:;" target="_self" class="js_qrcode_close" title="关闭"></a>');
qrcode.makeCode(url);
$('#qrcode').append('<p>用微信扫码二维码</p><p>分享至好友和朋友圈</p>');
}
makeCode();
$('.js_qrcode_close').click(function(){
$('.wechat-share').hide();
})
</script>
