使用 overtrue/share.js ,github地址: https://github.com/overtrue/share.js
简单易上手。
直接引用包中的 /dist/css/share.min.css
js用 /src/js/social-share.js /src/js/qrcode.js
jquert用: /dist/js/jquery.share.min.js
<link href="../share.min.css?1557996680" rel="stylesheet"> <script src="../social_share.min.js?1557996680"></script> <div class="share_block" style="bottom: 100px; 36px;z-index: 99999;right: 36px;height: 35px;position: fixed;overflow: visible;margin: 0;padding: 0;"> <a href="#" onclick="return false;" style="color: #dddddd; 36px;height: 35px;display: block;position: absolute;text-decoration: none;cursor: pointer;"><svg t="1558001609007" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1112" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35"><path d="M256 640c0 0 57.6-192 384-192l0 192 384-256-384-256 0 192C384 320 256 480 256 640zM704 768 128 768 128 384l128 0c12.8-12.8 19.2-25.6 32-32C332.8 307.2 384 281.6 441.6 256L0 256 0 896l832 0L832 627.2l-128 83.2L704 768z" p-id="1113" fill="#1296db"></path></svg></a> <div class="share_box" style="text-align: left;overflow: hidden;background: #f6f6f6;margin-left: 36px;"> <div style="height: 28px;color: #626262;overflow: hidden;font-weight: bold;font-size: 14px;line-height: 28px;padding: 0 5px;"><{t}>分享到<{/t}></div> <div style="padding: 5px 0;margin: 0;background: #fff;overflow: auto;overflow-x: hidden;"><div class="social-share"></div></div> </div> </div> <script> $('.share_block').hover(function() { // 鼠标移入时添加hover类 $('.share_box').css('border','solid 1px #e9e9e9'); $('.share_block').animate({'266px'},200); $('.share_box').animate({'230px'},200); }, function() { // 鼠标移出时移出hover类 $('.share_box').css('border','none'); $('.share_block').animate({'36px'},200); $('.share_box').animate({'0px'},200); }); </script>
social-share 为share.js的默认类,也可以自已指定,详细见文档。