博客的浮动小人

寻找素材

首先在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

/* spig.js */

let weather_box = "播报明日天气<iframe name='weather' src='https://i.tianqi.com/index.php?c=code&id=1&icon=1&num=1' frameborder='0' scrolling='no' height='25px' width='80px' allowtransparency='true' ></iframe>";
let link = "要不要搞个<a href='https://mhy12345.xyz/technology/kawaii-onnnanoko/'>浮动小人</a>玩玩？";

//右键菜单
jQuery(document).ready(function (("#spig").mousedown(function (e) {
        if(e.which==3){
            var msgs = [weather_box, link];
            var i = Math.floor(Math.random() * msgs.length);
            showMessage(msgs[i]);
        }
    });
    ) {
    ("#message").fadeTo("100", 1);
    });
});


//鼠标在上方时
jQuery(document).ready(function ((".mumu").jrumble({rangeX: 2,rangeY: 2,rangeRot: 1});
    (".mumu").fadeTo("300", 0.3);
        msgs = ["我隐身了，你看不到我", "我会隐身哦！嘿嘿！", "别动手动脚的，把手拿开！", "把手拿开我才出来！"];
        var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i]);
    });
    (".mumu").fadeTo("300", 1)
    });
});

//开始
jQuery(document).ready(function ((".spig").animate({
        top: ) {
    (this).text() + '</span>》请稍候');
    });
    (this).text() + '</span>》这篇文章么？');
    });
    ('#next-page').mouseover(function(){
        showMessage('要翻到下一页吗?');
    });
    (this).text() + '</span> 逛逛');
    });
    ('#submit').mouseover(function () {
        showMessage('确认提交了么？');
    });
    ('#go-prev').mouseover(function () {
        showMessage('点它可以后退哦！');
    });
    ('#refresh').mouseover(function () {
        showMessage('点它可以重新载入此页哦！');
    });
    ('#addfav').mouseover(function () {
        showMessage('点它可以把此页加入书签哦！');
    });
    ('.post-category a').mouseover(function () {
        showMessage('点击查看此分类下得所有文章');
    });
    ('#tho-shareto span a').mouseover(function () {
        showMessage('你知道吗?点它可以分享本文到'+('#switch-to-wap').mouseover(function(){
        showMessage('点击可以切换到手机版博客版面');
    });
});


//无聊讲点什么
jQuery(document).ready(function () {
    window.setInterval(function () {
        msgs = [weather_box, link, "快快订阅我的博客吧！", "乾坤大挪移！", "我飘过来了！~", "我飘过去了", "我得意地飘！~飘！~"];
        var i = Math.floor(Math.random() * msgs.length);
        s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
        var i1 = Math.floor(Math.random() * s.length);
        var i2 = Math.floor(Math.random() * s.length);
        ) {
    (".spig").animate({
            top: (".search-field").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    (".spig").animate({
            top: ("#author").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    (".spig").animate({
            top: ("#email").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    (".spig").animate({
            top: ("#url").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    (".spig").animate({
            top: ("#comment").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
});

var spig_top = 50;
//滚动条移动
jQuery(document).ready(function ((".spig").offset().top;
    (".spig").animate({
            top: ) {
    var stat_click = 0;
    (".spig").animate({
                left: document.body.offsetWidth/2*(1+s[i1]),
                top:  Math.min() {
    ("#spig").css("left"));
        _y = e.pageY - parseInt((document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x;
            var y = e.pageY - _y;
            var wx = ('#spig').width();
            var dy = ('#spig').height();
            if(x >= 0 && x <= wx && y > 0 && y <= dy) {
                $("#spig").css({
                    top: y,
                    left: x
                }); //控件新位置
                ismove = true;
            }
        }
    }).mouseup(function () {
        _move = false;
    });
});