前段时间想将自己的博客弄个可以分享的地方，可是采用百度分享的代码，不知道怎么弄的一直不能运行，于是自己就写了一个。
首先先展示一下效果图:


 
图中的分享按钮是一直悬浮在网页的右中的位置，方便选择。从图中可以看出，有几个常用的平台分享，当然自己也可以修改代码，做成自己需要的样子。
这是css代码：

<style type="text/css">
	.share{
		position: fixed;
		top: 50%;
		right: -75px;
		width: 100px;
		height: 150px;
		margin-top: -75px;
		transition: 1s;
		float: left;
	}
	.share .share_btn{
		width: 25px;
		height: 50px;
		background: #5b4a9b;
		color: white;
		text-align: center;
		margin-top: 50px;
		border-radius: 5px;
		cursor: pointer;
		float: left;
		line-height: 25px;
	}
	.share .share_content{
		margin-top: 0px;
		width: 75px;
		height: 100%;
		background: #5b4a9b;
		margin-left: 25px;
		border: 1px solid transparent;
		box-sizing: border-box;
	}
	.share .share_content ul{
		width: 100%;
		margin-bottom: 0;
		margin-left: 0px;
		margin-top: 15px;
	}
	.share .share_content ul li{
		list-style: none;
		width: 32px;
		height: 32px;
		float: left;
		margin-left: 3px;
		margin-top: 5px;
		background: white;
		cursor: pointer;
	}
	.share .share_content li a{
		display: block;
		width: 100%;
		height: 100%;
	}
	.share .share_content li a i{
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.share .share_content li a .share1{
		margin-left: -10px;
		margin-top: -10px;
	}
	.share .share_content li a .share2{
		margin-left: -10px;
		margin-top: 0px;
	}
</style>

这里是html代码，放在body里面：

<div class="share">
	<div class="share_btn">
		<span>分享</span>
	</div>
	<div class="share_content">
		<ul>
			<li><a class="icon" target="_blank"><img src="https://www.zhinianblog.com/wp-content/uploads/2017/10/qzone.png" class="share2"/></i></a></li>
			<li><a class="icon" target="_blank"><img src="https://www.zhinianblog.com/wp-content/uploads/2017/10/douban.png" class="share2"/></i></a></li>
			<li><a class="icon" target="_blank"><i class="fa fa-qq share1"></i></a></li>
			<li><a class="icon" target="_blank"><i class="fa fa-weibo share1"></i></a></li>
			<li><a class="icon" target="_blank"><i class="fa fa-renren share1"></i></a></li>
			<li><a class="icon" target="_blank"><i class="fa fa-long-arrow-right share1"></i></a></li>
		</ul>
	</div>
</div>

当然最重要的还是js代码了：

<script type="text/javascript">
	(function(){
		/**
		*站点：执念博客
		*作者：执念
		*网址：https://www.zhinianblog.com
		*/
		var share = document.getElementsByClassName("share")[0];
		var share_btn = document.getElementsByClassName("share_btn")[0];
		var share_content = document.getElementsByClassName("share_content")[0];
		var oli = share_content.getElementsByTagName("li");
		var url = "";
		var url1 = window.location.href;
		var url2 = url1.split("=");
		if(url1){
			url = url2[0]+"%3D"+url2[1];
		}
		var title = document.title;
		share_btn.onmouseover = function(){
			share.style.right = 0;
		}
		share.onmouseleave = function(){
			share.style.right = -75+"px";
		}
		for(var i=0;i<oli.length;i++){
			oli[i].index = i;
			oli[i].onclick = function(){
				switch(this.index){
					case 0: var a = this.getElementsByTagName("a")[0];
							a.href = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=执念博客&url="+url+"&title="+title;
							break;
					case 1: var a = this.getElementsByTagName("a")[0];
							a.href = "http://www.douban.com/recommend/?url="+url+"&title="+title;
							break;
					case 2: var a = this.getElementsByTagName("a")[0];
							a.href = "http://connect.qq.com/widget/shareqq/index.html?url="+url+"&title="+title;
							break;
					case 3: 
							var a = this.getElementsByTagName("a")[0];
							a.href = "http://service.weibo.com/share/share.php?title="+title+"&url="+url;
							break;
					case 4: var a = this.getElementsByTagName("a")[0];
							a.href = "http://widget.renren.com/dialog/share?resourceUrl="+url+"&title="+title+"&description=执念博客";
							break;
					case 5: share.style.right = -75+"px";
							break;
				}
			}
		}
	})();
</script>

代码全都给大家，我想做网站的大概都简单的知道这些代码该放在哪里的，因此我也就不在这里赘述了。如果有不会的可以在下方留言，我会回复的。