MENU

加入思考的小人儿JS特效

一、背景

一直垂涎Ada大佬站点聚合平中“思考的小人”特效,今天在Ada大佬的帮助下终于搬到我的站上来了。将下面的代码插入footer.php文件中即可,代码如下:

<div style="position:relative; z-index:999; top:0;" class="thinking-man"></div>
<script src="https://flypig.xyz/usr/js/thinking-man.js"></script>
 <script>
      new Man({
        color: "rgba(41,187,156)", // 小人颜色 - 可选
        bottom: "80px", // 距离容器距离 - 可选
        target: ".thinking-man", // 插入的容器 - 可选, 容器id 或者 class
      });
 </script>

二、可能遇到的问题

  1. 容器问题:需要自己建一个<div>容器设定好class或id
  2. 容器置顶问题:有的页面可能会出现下面的情况:

小人儿被上面的层切掉了,那就需要把小人层置顶,用下面的属性:

<div style='position:fixed; z-index:999; top:0;'></div>相对浏览器
<div style='position:absolute; z-index:999; top:0;'></div>相对父元素
<div style='position:relative; z-index:999; top:0;'></div>相对自己

有兴趣的大佬们,试试吧!