您的位置：首页 > 移动开发 > 微信开发

微信分享到朋友圈按钮右上角提示

2018-01-09 15:13 295 查看

<html>
<head>
<meta charset="utf-8">
</head>
<style>
#shareit {
-webkit-user-select: none;
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
text-align: center;
top: 0;
left: 0;
z-index: 105;
}
#shareit img {
max-width: 100%;
}
.arrow {
position: absolute;
right: 10%;
top: 5%;
}
#share-text {
margin-top: 400px;
}
</style>
</head>
<body>
<a id="share_btn" href="####">分享到朋友圈</a>
<div id="shareit">
<img class="arrow" src="http://dev.vxtong.com/cases/nuannan/imgs/share-it.png">
<a href="#" id="follow">
<img id="share-text" src="http://dev.vxtong.com/cases/nuannan/imgs/share-text.png">
</a>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
//立即分享到微信朋友圈点击事件
$("#share_btn").on("click", function() {
$("#shareit").show();
});

$("#shareit").on("click", function(){
$("#shareit").hide();
})
</script>
</body>
</html>

代码运行结果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

微信分享到朋友圈按钮 右上角提示

微信分享到朋友圈按钮右上角提示