网页分享按钮

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


 
图中的分享按钮是一直悬浮在网页的右中的位置，方便选择。从图中可以看出，有几个常用的平台分享，当然自己也可以修改代码，做成自己需要的样子。
这是css代码：
[code lang="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>
[/code]
这里是html代码，放在body里面：
[code lang="html"]
<div class="share">
<div class="share_btn">
<span>分享</span>
</div>
<div class="share_content">
<ul>
<li><a class="icon" target="_blank"><img src="http://zhinianboke.com/wp-content/uploads/2017/10/qzone.png" class="share2"/></i></a></li>
<li><a class="icon" target="_blank"><img src="http://zhinianboke.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>
[/code]
当然最重要的还是js代码了：
[code lang="js"]
<script type="text/javascript">
(function(){
/**
*站点：执念博客
*作者：执念
*网址：http://zhinianboke.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>
[/code]
代码全都给大家，我想做网站的大概都简单的知道这些代码该放在哪里的，因此我也就不在这里赘述了。如果有不会的可以在下方留言，我会回复的。