博客的浮动小人

寻找素材

首先在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 = wp_get_current_user()->display_name) != null)) echo 'var visitor="',display_name,'";'; else if(isset(_COOKIE['comment_author_'.COOKIEHASH])) echo 'var visitor="',_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]);
        }
    });
    ("#spig").bind("contextmenu", function(e) {         return false;     }); });  //鼠标在消息上时 jQuery(document).ready(function () {
    ("#message").hover(function () {("#message").fadeTo("100", 1);
    });
});


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

//开始
jQuery(document).ready(function () {     if (isindex) { //如果是主页         var now = (new Date()).getHours();         if (now > 0 && now <= 6) {             showMessage(visitor + ' 你是夜猫子呀?还不睡觉,明天起的来么你?', 6000);         } else if (now > 6 && now <= 11) {             showMessage(visitor + ' 早上好,早起的鸟儿有虫吃噢!早起的虫儿被鸟吃,你是鸟儿还是虫儿?嘻嘻!', 6000);         } else if (now > 11 && now <= 14) {             showMessage(visitor + ' 中午了,吃饭了么?不要饿着了,饿死了谁来挺我呀!', 6000);         } else if (now > 14 && now <= 18) {             showMessage(visitor + ' 中午的时光真难熬!还好有你在!', 6000);         } else if (now > 18 && now <= 22) {             showMessage(visitor + ' 下班时间!自由的空间就是爽!', 6000);         } else if (now > 22 && now <= 24) {             showMessage(visitor + ' 早睡早起好习惯!明早起来好上班!', 6000);         }else {             showMessage(visitor + ' 快来逗我玩吧!', 6000);         }     }     else {         let shorter = (s) => { return s.length < 35 ? s : s.slice(0,30)+'...'+s.slice(-5);};         showMessage('<div style="font-size:small">欢迎' + visitor + '来到《' + shorter(title) + '》</div>', 6000);     }(".spig").animate({
        top: (".spig").offset().top + 300,         left: document.body.offsetWidth - 160     },     {         queue: false,         duration: 1000     }); });  //鼠标在某些元素上方时 jQuery(document).ready(function () {
    ('h2 a').click(function () {//标题被点击时         showMessage('正在用吃奶的劲加载《<span style="color:#0099cc;">' +(this).text() + '</span>》请稍候');
    });
    ('h2 a').mouseover(function () {         showMessage('要看看《<span style="color:#0099cc;">' +(this).text() + '</span>》这篇文章么?');
    });
    ('#prev-page').mouseover(function(){         showMessage('要翻到上一页吗?');     });('#next-page').mouseover(function(){
        showMessage('要翻到下一页吗?');
    });
    ('#index-links li a').mouseover(function () {         showMessage('去 <span style="color:#0099cc;">' +(this).text() + '</span> 逛逛');
    });
    ('.comments').mouseover(function () {         showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向评论栏出发吧!');     });('#submit').mouseover(function () {
        showMessage('确认提交了么?');
    });
    ('#s').mouseover(function () {         showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!');     });('#go-prev').mouseover(function () {
        showMessage('点它可以后退哦!');
    });
    ('#go-next').mouseover(function () {         showMessage('点它可以前进哦!');     });('#refresh').mouseover(function () {
        showMessage('点它可以重新载入此页哦!');
    });
    ('#go-home').mouseover(function () {         showMessage('点它就可以回到首页啦!');     });('#addfav').mouseover(function () {
        showMessage('点它可以把此页加入书签哦!');
    });
    ('#nav-two a').mouseover(function () {         showMessage('嘘,从这里可以进入控制面板的哦!');     });('.post-category a').mouseover(function () {
        showMessage('点击查看此分类下得所有文章');
    });
    ('.post-heat a').mouseover(function () {         showMessage('点它可以直接跳到评论列表处.');     });('#tho-shareto span a').mouseover(function () {
        showMessage('你知道吗?点它可以分享本文到'+(this).attr('title'));     });('#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);         showMessage(msgs[i], 10000);     }, 35000); });  //无聊动动 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({             left: document.body.offsetWidth/2*(1+s[i1]),             top:  document.body.offsetHeight/2*(1+s[i1])         },         {             duration: 2000,             complete: showMessage(msgs[i])         });     }, 45000); });  //评论资料 jQuery(document).ready(function () {
    (".search-field").click(function () {         showMessage("来看看TA在找啥!");(".spig").animate({
            top: (".search-field").offset().top - 70,             left:(".search-field").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    ("#author").click(function () {         showMessage("留下你的尊姓大名!");(".spig").animate({
            top: ("#author").offset().top - 70,             left:("#author").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    ("#email").click(function () {         showMessage("留下你的邮箱,不然就是无头像人士了!");(".spig").animate({
            top: ("#email").offset().top - 70,             left:("#email").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    ("#url").click(function () {          showMessage("快快告诉我你的家在哪里,好让我去参观参观!");(".spig").animate({
            top: ("#url").offset().top - 70,             left:("#url").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    ("#comment").click(function () {         showMessage("认真填写哦!不然会被认作垃圾评论的!我的乖乖~");(".spig").animate({
            top: ("#comment").offset().top - 70,             left:("#comment").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
});

var spig_top = 50;
//滚动条移动
jQuery(document).ready(function () {     var f =(".spig").offset().top;
    (window).scroll(function () {(".spig").animate({
            top: (window).scrollTop() + f +300         },         {             queue: false,             duration: 1000         });     }); });  //鼠标点击时 jQuery(document).ready(function () {
    var stat_click = 0;
    (".mumu").click(function () {         if (!ismove) {             stat_click++;             if (stat_click > 4) {                 msgs = ["你有完没完呀?", "你已经摸我" + stat_click + "次了", "非礼呀!救命!OH,My ladygaga"];                 var i = Math.floor(Math.random() * msgs.length);                 //showMessage(msgs[i]);             } else {                 msgs = ["筋斗云!~我飞!", "我跑呀跑呀跑!~~", "别摸我,大男人,有什么好摸的!", "惹不起你,我还躲不起你么?", "不要摸我了,我会告诉老婆来打你的!", "干嘛动我呀!小心我咬你!"];                 var i = Math.floor(Math.random() * msgs.length);                 //showMessage(msgs[i]);             }             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({
                left: document.body.offsetWidth/2*(1+s[i1]),
                top:  Math.min((window).height(), document.body.offsetHeight)/2*(1+s[i1])             },             {                 duration: 500,                 complete: showMessage(msgs[i])             });         } else {             ismove = false;         }     }); }); //显示消息函数 function showMessage(a, b) {     if (b == null) b = 10000;     jQuery("#message").hide().stop();     jQuery("#message").html(a);     jQuery("#message").fadeIn();     jQuery("#message").fadeTo("1", 1);     jQuery("#message").fadeOut(b); }; //显示骰子点数函数 function showRand(a, b) {     if (b == null) b = 10000;     jQuery("#newid").hide().stop();     jQuery("#newid").html(a);     jQuery("#newid").fadeIn();     jQuery("#newid").fadeTo("1", 1);     jQuery("#newid").fadeOut(b); }; //拖动 var _move = false; var ismove = false; //移动标记 var _x, _y; //鼠标离控件左上角的相对位置 jQuery(document).ready(function () {
    ("#spig").mousedown(function (e) {         _move = true;         _x = e.pageX - parseInt(("#spig").css("left"));
        _y = e.pageY - parseInt(("#spig").css("top"));     });(document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x;
            var y = e.pageY - _y;
            var wx = (window).width() -('#spig').width();
            var dy = (document).height() -('#spig').height();
            if(x >= 0 && x <= wx && y > 0 && y <= dy) {
                $("#spig").css({
                    top: y,
                    left: x
                }); //控件新位置
                ismove = true;
            }
        }
    }).mouseup(function () {
        _move = false;
    });
});

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据