今天分享一个看起来还不错的网站底部动态交互的效果，好看的动态的图文效果，以及右侧文章点赞和收藏，跟随滚动的动态百分比效果，最终实现的效果大致如下：

效果图

实现这个功能，步骤有点多，改的地方也不少，请仔细认真阅读步骤。不然有可能导致无法实现想要的效果了~

教程

1、在functions.php加上下面这段代码（为了防止内部的js和css链接失效，本人在下面备份了，后期可以改成自己的链接）

functions.php代码

此处内容已隐藏，请评论后刷新页面查看.

sweetalert.min.js代码备份

此处内容已隐藏，请评论后刷新页面查看.

sweetalert.css代码备份

此处内容已隐藏，请评论后刷新页面查看.

2、引入阿里巴巴矢量库的图标，（为了防止js和css链接失效，后期可以你最好改成自己的链接）

<script src="https://at.alicdn.com/t/font_2827587_k24if0ucns.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2827587_k24if0ucns.css">
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

3、在footer.php里加上下面这段代码，自行修改（图片如果失效，请用图片备份文件）

functions.php代码

此处内容已隐藏，请评论后刷新页面查看.

dibudaimatupian.png图片备份

4、CSS代码

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)

此处内容已隐藏，请评论后刷新页面查看.

5、JS代码

这段js代码是用来触发滚动条显示百分比的

JS代码

此处内容已隐藏，请评论后刷新页面查看.

layer.js代码备份

此处内容已隐藏，请评论后刷新页面查看.

更新

对于子比主题更新到了6.1版本，分享按钮代码发生了变动，这里我们也做一下修改：

<a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
</a>

欢迎加入程序猿大家庭(QQ群)~~~

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明本站名称：程序猿
本站永久网址：https://www.oove.cn
云盘：https://pan.alsvip.com
网站说明：
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END