SNS社交网络的关注我们及微信二维码弹出层显示的方法

  •   
  • 6501
  • jQuery
  • 3
  • super_dodo
  • 2014/09/18

进入互联网时代社交平台变成了必不可少的了解或是进入这个社会的入口.微信如此火爆,得益于庞大的用户群体，所以适当的接入进入这个社交网络成为了每一个互联网企业的必须开启的一扇门。
sns_share_weixin

1.点击新浪微博的图标,进入新浪微博进行关注.
2.点击腾讯微博的图标，进入腾讯微博进行关注.
3.点击QQ的图标,启动QQ,在线交流.
4.点击电话或者邮件的图标进行,显示电话号码或调用发送邮件的方法.(自己去实现)
5.当鼠标移动到微信的图标上，出现二维码，这样方便用户扫描和关注。(重点)
6.分享到QQ空间,一键分享到QQ空间。

直接上代码，复制即可使用和演示和demo

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="http://vip.iqujing.com/assets/css/bootstrap.css" />
	<style type="text/css">
	#sns_vip{list-style: none;position: relative;}
	#sns_vip li{float: left;padding:10px 20px;}
	#sns_vip li img{width: 50px;}
	#sns_box{display: none;width:150px;margin-left:60px;height:150px;float:right;position:absolute;top:0;z-index:10000;}
	</style>
</head>
<body>

<div class="panel panel-primary">
	<div class="panel-heading">公司名称</div>
	<div class="panel-body">
	<h2 style="font-family:'方正启体简体';color:#ff3600;border-bottom:1px solid #ccc;margin:0 20px;padding:5px;">云南省曲靖市爱曲靖网络科技有限公司</h2>
	<ul id="sns_vip">
		<li>
			<a href="http://weibo.com/u/2257730312" target="_blank">
				<img src="http://vip.iqujing.com/assets/images/icon/contactus_sina.png">
			</a>
		</li>
		<li>
			<a href="http://t.qq.com/dodobook" target="_blank">
				<img src="http://vip.iqujing.com/assets/images/icon/tqq_logo.png">
			</a>
		</li>
		<li>
			<a href="tencent://message/?Site=qq&Menu=yes&uin=2770818277">
				<img src="http://vip.iqujing.com/assets/images/icon/qq_icon.png">
			</a>
		</li>
		<li><a href="javascript:void(0)"><img src="http://vip.iqujing.com/assets/images/icon/contactus_mail.png"></a></li>
		<li><a href="javascript:void(0)"><img src="http://vip.iqujing.com/assets/images/icon/contactus_tel.png"></a></li>
		<li>
			<a href="javascript:void(0)"  onmouseover="display()" onmouseout="disappear()">
				<img src="http://vip.iqujing.com/assets/images/icon/contactus_weixin.jpg">
			</a>
			<img id="sns_box" onmouseover="display()" onmouseout="disappear()"  style="width:150px" src="http://vip.iqujing.com/assets/images/icon/qrcode.jpg" />
			<script type="text/javascript">
				function display(){ document.getElementById("sns_box").style.display="block";  }
 				function disappear(){ document.getElementById("sns_box").style.display="none"; }
			</script>
		</li>
		<li>
			<div class="bshare-custom icon-medium-plus">
				<a title="分享到QQ空间" class="bshare-qzone"></a>
				<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
                  <a title="分享到微信" class="bshare-weixin"></a>
				<a title="分享到朋友网" class="bshare-qqxiaoyou"></a>
				<a title="分享到人人网" class="bshare-renren"></a>
				<a title="分享到腾讯微博" class="bshare-qqmb"></a>
				<a title="分享到网易微博" class="bshare-neteasemb"></a>
				<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
				<span class="BSHARE_COUNT bshare-share-count">0</span>
			</div>
			<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
			<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
		</li>
	</ul>
	</div>
</div>

</body>
</html>

备注SNS的小图标请自己寻找，我也没找到一套完整的。

我的实在Bootstrap下面的风格,基本的样式还需要您按照你的风格调整.功能基本已实现.

你我终年不遇， 承蒙时光不弃，还剩温暖潮汐， 接我三寸光景， 与你生老病死， 走到暮年古稀。