寻找素材
首先在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>中插入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!--.浮动小人--> <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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 |
/* 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; }); }); |