给网站文章底部添加分享/赞赏/收藏等小功能

本次给大家分享一个简单的网站文章底部 分享、赞赏、收藏、手机看、投诉小功能，设置了只PC端显示，移动端会隐藏。

本次代码，大家需要修改的地方为：

1.打赏码（自己生成个三合一的即可，截取二维码为正方形，请勿使用长方形或者其他奇葩样式，圆形也可以）

2.侵权投诉链接

3.JS中二维码的图标地址

修改完，将所有代码放置文章底部公共区域即可。

HTML代码：

1. <div class="footer-tool">
2. <div class="tool-list">
3. <a href="javascript:;">分享</a>
4. <div class="tool-prompt">
5. <p>分享海报</p>
6. <img class="ewmurl" src="" alt="">
7. <p>扫一扫 - 分享本文</p>
8. </div>
9. </div>
10. <div class="tool-list">
11. <a href="javascript:;">打赏</a>
12. <div class="tool-prompt">
13. <p>QQ 微信 支付宝</p>
14. <img src="http://cdn.iqzhan.com/qzhan/img/106.png" alt="">
15. <p>扫一扫 - 打赏Q站</p>
16. </div>
17. </div>
18. <div class="tool-list">
19. <a href="javascript:;">收藏</a>
20. <div class="tool-prompt">
21. <p>请按下 Ctrl + D</p>
22. <p>即可收藏当前文章</p>
23. </div>
24. </div>
25. <div class="tool-list">
26. <a href="javascript:;">手机看</a>
27. <div class="tool-prompt">
28. <p>分享到微信朋友圈</p>
29. <img class="ewmurl" src="" alt="">
30. <p>扫一扫 - 手机阅读</p>
31. </div>
32. </div>
33. <div class="tool-list">
34. <a href="http://iqzhan.com" target="_blank">侵权投诉</a>
35. <div class="tool-prompt">
36. <p>侵权、举报、建议</p>
37. <p>↓</p>
38. </div>
39. </div>
40. </div>
41. JS代码
43. <script>
44. // 获取当前 url 地址
45. var siteurl = window.location.href;
46. // 通过正则将url的 & 替换为 %26
47. var siteurlres = siteurl.replace(/&/g,"%26");
48. // 获取图片id
49. var ewmurl = document.getElementsByClassName("ewmurl");
50. // 生成二维码图片路径
51. ewmurl[0].src = ewmurl[1].src = 'http://qr.topscan.com/api.php?bg=ffffff&fg=333333&text=' + siteurlres + '&logo=http://cdn.iqzhan.com/qzhan/img/106.png'
52. </script>

CSS代码：

1. <style>
2. @media screen and (max-width: 1198px){
3. .footer-tool{
4. display: none!important;
5. }
6. }
7. .footer-tool{
8. width: 100%;
9. height: 48px;
10. background: #f3f7fb;
11. border: 1px solid #d6e6f5;
12. display: flex;
13. justify-content: center;
14. align-items: center;
15. margin: 5px 0;
16. }
17. .tool-list{
18. position: relative;
19. width: 20%;
20. height: 36px;
21. }
22. .tool-list a{
23. color: #555666;
24. font-size: 16px;
25. line-height: 36px;
26. text-decoration: none;
27. padding: 0 12px;
28. box-sizing: border-box;
29. border-radius: 4px;
30. display: block;
31. text-align: center;
32. }
33. .tool-list a:hover{
34. background: rgba(39,124,204,0.1);
35. }
36. .tool-list:hover .tool-prompt{
37. display: block;
38. }
39. .tool-prompt{
40. display: none;
41. width: 180px;
42. background: #fff;
43. border-radius: 10px;
44. box-shadow: 0 0 5px rgba(0,0,0,.4);
45. padding: 5px 10px;
46. box-sizing: border-box;
47. text-align: center;
48. position: absolute;
49. bottom: 36px;
50. left: 50%;
51. margin-left: -90px;
52. }
53. .tool-prompt img{
54. max-width: 100%;
55. max-height: 160px;
56. }
57. .tool-prompt p{
58. color: #555666;
59. font-size: 16px;
60. }
61. </style>