寻找素材
首先在p站找一张可爱的女孩子,最好是全身、呆萌系的,比如我找了这张pid56056419。

使用在线ps软件将背景图片去掉,另存为png格式图片,像这样——

拿到这张图片的链接,比如我直接使用了本文中图片链接 https://mhy12345.xyz/wp-content/uploads/2020/04/56056419_p0-2.png.
引入javascript
添加spig.js文件到博客后端,如[WP_ROOT/wp-includes/js/spig.js],对于这种情况,我们可以使用静态链接https://mhy12345.xyz/wp-includes/js/spig.js,访问改文件,文件中定义了一些角色动作以及交互逻辑。具体js代码可以参考文末附件。
将jquery和spig.js引入网页,对于wordpress来说,是在<主题编辑器/footer.php>中插入
<!--.浮动小人--> <script type="text/javascript"> <?php if(is_home()) echo 'var isindex=true;var title="";';else echo 'var isindex=false;var title="', get_the_title(),'";'; ?> <?php if(((display_name,'";'; else if(isset(
_COOKIE['comment_author_'.COOKIEHASH],'";';else echo 'var visitor="游客";';echo "\n"; ?> </script> <script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://mhy12345.xyz/wp-includes/js/spig.js"></script> <style> .spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;left:160px;z-index:9999;} #message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-65px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;} .mumu{width:130px;height:170px;cursor: move;background:url(//mhy12345.xyz/wp-content/uploads/2020/04/56056419_p0-2.png) no-repeat;background-size:150px;} </style> <div id="spig" class="spig"> <div id="message">加载中……</div> <div id="mumu" class="mumu"></div> </div> <!--.end浮动小人-->
保存刷新就可以看到浮动的小人啦~
开发者
https://ihuan.me/2107.html
https://www.dreamwings.cn/spig/2929.html