分享一个之前写的好东西（打赏、分享、手机看、收藏、反馈）

婷姐 · 发表于 2024-4-17 20:24:51

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

挺好用的一个功能，加到网站文章底部，时不时还有人打赏。

效果截图
分享一个之前写的好东西（打赏、分享、手机看、收藏、反馈）分享这个作品,分享内容赚钱

演示地址（文章底部） https://www.sharedbk.com/post/272.html
只在PC端显示

CSS

<style> @media screen and (max-width: 1198px){ .footer-tool{ display: none!important; } } .footer-tool{ width: 100%; height: 48px; background: #f3f7fb; border: 1px solid #d6e6f5; display: flex; justify-content: center; align-items: center; margin: 5px 0; } .tool-list{ position: relative; width: 20%; height: 36px; } .tool-list a{ color: #555666; font-size: 16px; line-height: 36px; text-decoration: none; padding: 0 12px; box-sizing: border-box; border-radius: 4px; display: block; text-align: center; } .tool-list a:hover{ background: rgba(39,124,204,0.1); } .tool-list:hover .tool-prompt{ display: block; } .tool-prompt{ display: none; width: 180px; background: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,.4); padding: 5px 10px; box-sizing: border-box; text-align: center; position: absolute; bottom: 36px; left: 50%; margin-left: -90px; } .tool-prompt img{ max-width: 100%; max-height: 160px; } .tool-prompt p{ color: #555666; font-size: 16px; }</style>

复制代码

HTML

<div class="footer-tool"> <div class="tool-list"> <a href="javascript:;">🥰分享</a> <div class="tool-prompt"> <p>分享海报</p> <img class="ewmurl" src="" alt=""> <p>扫一扫 - 分享本文</p> </div> </div> <div class="tool-list"> <a href="javascript:;">😍打赏</a> <div class="tool-prompt"> <p>微信</p> <p>扫一扫 - 打赏鹏仔</p> </div> </div> <div class="tool-list"> <a href="javascript:;">🤩收藏</a> <div class="tool-prompt"> <p>请按下 Ctrl + D</p> <p>即可收藏当前文章</p> </div> </div> <div class="tool-list"> <a href="javascript:;">🥺手机看</a> <div class="tool-prompt"> <p>分享到微信朋友圈</p> <img class="ewmurl" src="" alt=""> <p>扫一扫 - 手机阅读</p> </div> </div> <div class="tool-list"> <a target="_blank">🙄侵权投诉</a> <div class="tool-prompt"> <p>侵权、举报、建议</p> <p>↓</p> </div> </div></div>

复制代码

JS

<script> // 获取当前 url 地址 var siteurl = window.location.href; // 通过正则将url的 & 替换为 %26 var siteurlres = siteurl.replace(/&/g,"%26"); // 获取图片id var ewmurl = document.getElementsByClassName("ewmurl"); // 生成二维码图片路径 ewmurl[0].src = ewmurl[1].src = 'https://www.sharedbk.com/api/qr/qr.php?content=' + siteurlres;</script>

复制代码

©dz插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
如有侵权请邮件与我们联系处理:discuz-x@qq.com（手机随时接收邮件）并出示相关证明以便删除。敬请谅解！