就是自己做了一个html5的网站,想增加一个分享到朋友圈的功能
发布网友
发布时间：2022-04-23 03:44
共2个回答
热心网友
时间：2022-04-20 00:24
<div id="mcover" onclick="weChat()" style="display:none;">
<img src="images/guide.png" />
</div>
<div class="text" id="content">
<div id="mess_share">
<dsiv id="share_1">
<button class="button2" onclick="button1()">
<img src="images/icon_msg.png" width="64" height="64" />
发送给朋友
</button>
</div>
<div id="share_2">
<button class="button2" onclick="button2()">
<img src="images/icon_timeline.png" width="64" height="64" />
分享到朋友圈
</button>
</div>
<div class="clr"></div>
</div>
</div>
css代码
#mcover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
z-index: 20000;
}
#mcover img {
position: fixed;
right: 18px;
top: 5px;
width: 260px!important;
height: 180px!important;
z-index: 20001;
}
.text {
margin: 15px 0;
font-size: 14px;
word-wrap: break-word;
color: #727272;
}
#mess_share {
margin: 15px 0;
display: block;
}
#share_1 {
float: left;
width: 49%;
display: block;
}
#share_2 {
float: right;
width: 49%;
display: block;
}
.clr {
display: block;
clear: both;
height: 0;
overflow: hidden;
}
.button2 {
font-size: 16px;
padding: 8px 0;
border: 1px solid #adadab;
color: #000000;
background-color: #e8e8e8;
background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 1px 1px #efefef;
text-shadow: 0.5px 0.5px 1px #fff;
text-align: center;
border-radius: 3px;
width: 100%;
}
#mess_share img {
width: 22px!important;
height: 22px!important;
vertical-align: top;
border: 0;
}
Jquery代码
<script type="text/javascript">
function button1(){
$("#mcover").css("display","block") // 分享给好友按钮触动函数
}
function button2(){
$("#mcover").css("display","block") // 分享给好友圈按钮触动函数
}
function weChat(){
$("#mcover").css("display","none"); // 点击弹出层，弹出层消失
}
$(function(){
setTimeout(function () {
$("#mcover").show();}, 6000); // 6000时毫秒是弹出层
setTimeout(function () {
$("#mcover").hide(); }, 8000); //8000毫秒是隐藏层
})
</script>
4
最终效果图追问小弟刚自学的，还有些疑问。一、我要把css和Jquery文件保存成什么名字，放在怎样的目录结构下；二、代码中的图片的路径，我没有素材，而且对目录结构不太懂。最好是能把这几个文件打包传来。
热心网友
时间：2022-04-20 01:42
1、去找现成的插件就行了，搜索一个jiathis。这个目前很多都在用。
2、百度搜分享的js。
3、到青龙建站教程自学网找。
