晓夏

小皇

教育信息化方案砖家

微信分享到朋友圈按钮及微信分享带图片和介绍

浏览量:1730

想实现的效果如下:点击 分享到朋友圈 后会弹出如下的一个背景层,指到分享菜单。因为微信中已经不再提供自定义按钮直接分享,必须通过微信的分享功能才可以。

function ShowWeiXinShareTips(page) {
	var div = '<div id="WeiXinShareTips"><img src="http://www.brandhd.com/style/images/topright.png" width="165" height="114"/></div>';
	$(page).append(div);
	$('#WeiXinShareTips').on('click',function() {$('#WeiXinShareTips').remove();});
	setTimeout(function() {$('#WeiXinShareTips').remove();}, 5000);
}


下面是BODY的一个DIV的HTML,弹出的层会以这个为基准弹出。

<div id="eventview">这里面是你的其他的内容,这个内容上面会被覆盖上一层灰色的背景,有个箭头图片显示在右上角</div>

下面是按钮的HTML代码

<div class="weixin ShareButtons"><a onclick="ShowWeiXinShareTips('#eventview')" class="ShareToQuan"><img src="http://www.brandhd.com/style/images/shareBtn2.png" width="20" />分享到朋友圈</a><a onclick="ShowWeiXinShareTips('#eventview')" class="ShareToFriend"><img src="http://www.brandhd.com/style/images/shareBtn1.png" width="20" />发送给好友</a><a href="/m/about" data-ajax="false" class="NewSubmitButton">我也要组织活动</a></div>


下面是CSS样式

#WeiXinShareTips{
	position:fixed;z-index: 1000;left: 0; top: 0;width: 100%;height: 100%;background-color: rgba(100, 100, 100, 0.9);
}
#WeiXinShareTips img{
	position: fixed; right: 0;
}
div.ShareButtons{
	text-align: left;font-size: 14px;margin: 10px;
}
a.ShareToFriend, a.ShareToQuan, a.NewSubmitButton{
	color: #666;font-size: 15px; height: 40px;line-height: 39px; display: inline-block; width: 48%;text-align: center;margin-bottom: 10px;
	background: #ddd;border: 1px solid #ddd;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#fcfcfc),to(#f1f1f1));
	background-image: -webkit-linear-gradient(#fcfcfc,#f1f1f1);
	background-image: -moz-linear-gradient(#fcfcfc,#f1f1f1);
	background-image: -ms-linear-gradient(#fcfcfc,#f1f1f1);
	background-image: -o-linear-gradient(#fcfcfc,#f1f1f1);
	background-image: linear-gradient(#fcfcfc,#f1f1f1);
	-webkit-border-radius: 5px;border-radius: 5px;
}
a.NewSubmitButton{
	width: 100%;
}
a.ShareToQuan{
	float: right;
}
a.ShareToQuan img{
	alignment-baseline: middle;
}


神回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。