网页分享按钮
首先先展示一下效果图:


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