自定义页面微信、微博、QQ分享效果

时间:2021-01-13 07:41:38

几行简单的分享代码既可以实现,先看下效果:

自定义页面微信、微博、QQ分享效果

第一步:页面因为结构代码

<div id="freebtn">
<ul>
<li class="wx"><div class="wxcodeimg" style="display:none;"><img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=@Request.Url" /></div></li>
<li class="qq"></li>
<li class="wb"></li>
<li class="qz"></li>
<li class="to_top"></li>
</ul>
</div>

第二步:引入页面样式

<!--分享-->
<style>
li {
cursor: pointer;
width: 60px;
height: 60px;
margin-top: 5px;
} #freebtn {
position: fixed;
bottom: 50px;
right: 50px;
z-index: ;
}
.wxcodeimg {
position: relative;
bottom: 20px;
right: 120px;
z-index: ;
}
.wxcodeimg img {
border: 2px solid #CCCCCC;
border-radius:2px;
}
.wx {
background-image: url(https://weixin1@3x.png);
} .wx:hover {
background-image: url(https://weixin@3x.png);
} .qq {
background-image: url(https:/qq1@3x.png);
} .qq:hover {
background-image: url(https://qq@3x.png);
} .wb {
background-image: url(https:///weibo1@3x.png);
} .wb:hover {
background-image: url(https://weibo@3x.png);
} .qz {
width: 60px;
height: 60px;
background-image: url(https://qqk1@3x.png);
margin-top: 5px;
} .qz:hover {
background-image: url(https://qqk@3x.png);
} .to_top {
background-image: url(https://top1@3x.png);
margin-top: 20px;
} .to_top:hover {
background-image: url(https://top@3x.png);
margin-top: 20px;
}
</style>

此处图片链接不能公开,还望谅解。。

第三步:JS引入

<script type="text/javascript">
//分享相关
$(".wx").mouseover(function () {
$(".wxcodeimg").show();
});
$(".wx").mouseout(function () {
$(".wxcodeimg").hide();
});
$(".qq").click(function () {
window.open("https://connect.qq.com/widget/shareqq/index.html?url=" + encodeURIComponent(location.href) + "%230-sqq-1-80247-9737f6f9e09dfaf5d3fd14d775bfee85&title=" + encodeURIComponent ('@ViewBag.Title')+"&desc=&summary=&site=baidu")
})
$(".wb").click(function () {
window.open("http://service.weibo.com/share/share.php?url=" + encodeURIComponent(location.href) + "%230-tsina-1-93843-397232819ff9a47a7b7e80a40613cfe1&title=" + encodeURIComponent ('@ViewBag.Title')+"&appkey=1343713053&searchPic=true#_loginLayer_1539308246513")
})
$(".qz").click(function () {
window.open("https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + encodeURIComponent(location.href) + "%230-qzone-1-29994-d020d2d2a4e8d1a374a433f596ad1440&title=" + encodeURIComponent('@ViewBag.Title')+"&desc=&summary=&site=")
})
$(".to_top").click(function () {
window.scrollTo(0, 0);
})
$(document).scroll(function () {
var top = $(document).scrollTop();
if (top < 100) {
$('.to_top').hide();
}
else {
$('.to_top').show();
}
})
</script>

微信分享二维码,使用接口https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=url

分享链接传入,URL地址和标题即可。