<!-- 分享 --><p class="share-box">
<b style="vertical-align: middle;">分享到:</b>
<a title="分享到新浪微博" class="shareSina"><span class="share-icon"></span><span class="share-text">新浪微博</span></a>
<a title="分享到微信" class="shareWX"><span class="share-icon"></span><span class="share-text">微信</span></a></p><!-- 微信弹出二维码 --><p class="wx-box">
<p class="wx-box-head">
<span>分享到微信</span>
<a href="#" onclick="return false;" class="wx-box-close">×</a>
</p>
<p id="wxCode" class="wx-box-main">
</p>
<p class="wx-box-foot">
打开微信,点击底部的“发现”, <br>
使用“扫一扫”即可将网页分享至朋友圈。 </p></p>/* share */
.shareSina,
.shareWX{
display: inline-block;
height: 25px;
z-index: 1;
cursor: pointer;
vertical-align: middle;
}
.share-icon{
display: inline-block;
width: 22px;
height: 22px;
z-index: 1;
cursor: pointer;
text-indent: -9999px;
vertical-align: middle;
}
.shareSina .share-icon{
background: url(/img/share-sina.png) no-repeat;
background-size:100%;
}
.shareWX .share-icon{
background: url(/img/share-wx.png) no-repeat;
background-size:100%;
}
.share-text{
vertical-align: middle;
}
.wx-box{
left: 3rem;
top: 1rem;
position: absolute;
margin: 0;
z-index: 1001;
background: #fff;
border: solid 1px #d8d8d8;
font-size: 0.12rem;
padding: 0.15rem;
display: none;
}
.wx-box .wx-box-head{
font-size: 0.12rem;
text-align: left;
line-height: 0.16rem;
height: 0.16rem;
position: relative;
color: #000;
}
.wx-box .wx-box-close{
width: 0.16rem;
height: 0.16rem;
position: absolute;
right: 0;
top: 0;
color: #999;
text-decoration: none;
font-size: 0.16rem;
}
.wx-box .wx-box-main{
padding: 0.15rem 0.1rem;
min-height: 2rem;
text-align: center;
}
.wx-box .wx-box-foot{
font-size: 12px;
text-align: left;
line-height: 22px;
color: #666;
}<!-- share -->
<script src="js/jquery/jquery.qrcode.min.js"></script>
<script>
var ShareTip = function(){} //分享到新浪微博
ShareTip.prototype.sharetosina=function(title,url)
{
var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url;
// var sharesinastring='http://v.t.sina.com.cn/share/share.php?&appkey='+appkey+'&title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='picurl;
window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');
}
$('.shareSina').on('click', function () {
var shareTitle = $('.blog-single-head h1').text();
var shareContent = $('.blog-single-head h2').text();
var shareUrl = window.location.href;
var share1 = new ShareTip();
share1.sharetosina(shareTitle + " " + shareContent,shareUrl);
})
//分享到微信
$('.shareWX').on('click', function () {
$('.wx-box').css('display', 'block');
var shareUrl = window.location.href;
//生成二维码
$("#wxCode").empty().qrcode({
render: 'canvas',
text: shareUrl //任意内容
});
})
$('.wx-box-close').on('click', function () {
$('.wx-box').css('display', 'none');
})</script><!-- share end -->图片可以自己去选择下载,我用的是阿里巴巴矢量图标库中下载的png
效果图:
以上就是三种实现微博、微信分享的代码分享的详细内容,更多请关注php中文网其它相关文章!
微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号