浮动小人很有爱:
1、js
//右键菜单 jQuery(document).ready(function ($) { $("#spig").mousedown(function (e) { if(e.which==3){ showMessage("秘密通道:<br /> <a href=\"https://dedewp.com\" title=\"回首页\">回首页</a> <a href=\"https://dedewp.com/bai-no-du/\" title=\"项目\">加入VIP</a> <a href=\"https://dedewp.com/online-music/\" title=\"音乐\">音乐</a> ",10000); } }); $("#spig").bind("contextmenu", function(e) { return false; }); }); //鼠标在消息上时 jQuery(document).ready(function ($) { $("#message").hover(function () { $("#message").fadeTo("100", 1); }); }); //鼠标在上方时 jQuery(document).ready(function ($) { $(".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('你是夜猫子呀?还不睡觉,明天起的来么你?', 6000); } else if (now > 6 && now <= 11) { showMessage('早上好,早起的鸟儿有虫吃噢!早起的虫儿被鸟吃,你是鸟儿还是虫儿?嘻嘻!', 6000); } else if (now > 11 && now <= 14) { showMessage('中午了,吃饭了么?不要饿着了,饿死了谁来挺我呀!', 6000); } else if (now > 14 && now <= 18) { showMessage('中午的时光真难熬!还好有你在!', 6000); } else { showMessage('快来逗我玩吧!', 6000); } } else { showMessage('欢迎您来到陌小雨博客阅读 ' + title + ' ', 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>》这篇文章么?'); }); $('#submit').mouseover(function () { showMessage('确认提交了么?'); }); $('.form-control').focus(function () { showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!'); }); $('.article-nav-prev a').mouseover(function () { showMessage('点它可以查看前一篇文章!'); }); $('.article-nav-next a').mouseover(function () { showMessage('点它可以查看后一篇文章!'); }); $('.action-like').mouseover(function () { showMessage('喜欢就点赞吧!'); }); $('.logo a').mouseover(function () { showMessage('点它就可以回到首页啦!'); }); $('.feed-tqq').mouseover(function () { showMessage('我们成为好基友吧!'); }); $('.feed-weixin').mouseover(function () { showMessage('关注就送福利哦!'); }); $('.article-meta a').mouseover(function () { showMessage('点击查看此分类下的所有文章'); }); $('.action-share a').mouseover(function () { showMessage('你知道吗点它可以分享本文到'+$(this).attr('title')); }); $('.or').mouseover(function(){ showMessage('欢迎土豪打赏!'); }); }); jQuery(document).ready(function($) { window.setInterval(function() { msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"]; var i = Math.floor(Math.random() * msgs.length); showMessage(msgs[i], 8000) }, 15000) }); //评论资料 jQuery(document).ready(function ($) { $("#author").click(function () { showMessage("留下你的尊姓大名!"); $(".spig").animate({ top: $("#author").offset().top - 70, left: $("#author").offset().left - 120 }, { queue: false, duration: 1000 }); }); $("#email").click(function () { showMessage("留下你的邮箱,不然就是无头像人士了!"); $(".spig").animate({ top: $("#email").offset().top - 70, left: $("#email").offset().left - 120 }, { queue: false, duration: 1000 }); }); $("#url").click(function () { showMessage("快快告诉我你的家在哪里,好让我去参观参观!"); $(".spig").animate({ top: $("#url").offset().top - 70, left: $("#url").offset().left - 120 }, { queue: false, duration: 1000 }); }); $("#comment").click(function () { showMessage("认真填写哦!不然会被认作垃圾评论的!我的乖乖~"); $(".spig").animate({ top: $("#comment").offset().top - 70, left: $("#comment").offset().left - 120 }, { 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 }); }); }); //显示消息函数 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); }; //拖动 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; }); });
2、下面代码加到 footer.php 底部文件 body 标志前
<script type="text/javascript">
<?php if(is_home()) echo 'var isindex=true;var title="";';else echo 'var isindex=false;var title="', get_the_title(),'";'; ?>
</script>
<div id="spig" class="spig"><div id="message">加载中……</div><div id="mumu" class="mumu"></div></div>
3、加载css
/*浮动小人*/ .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:-45px;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(https://dedewp.com/wp-content/themes/xiu2.1/images/spig.png) no-repeat;}
4、浮动小人素材下载
5、折腾版本(加入一言,方法来自:https://myhloli.com/hitokoto.html)
(1)找到第1步代码中的
msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];
修改为:
//msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];
msgs = [$("#hitokoto").text()];
(2)在第2步代码后面加上
<span class="hitokoto" id="hitokoto" style="display:none">Loading...</span> <div id="hjsbox" style="display:none"> </div> <script> setTimeout("getkoto()",1000); var t; function getkoto(){ var hjs = document.createElement('script'); hjs.setAttribute('id', 'hjs'); hjs.setAttribute('src', 'http://api.hitokoto.us/randuid=3221&encode=jsc&fun=echokoto'); document.getElementById("hjsbox").appendChild(hjs); t=setTimeout("getkoto()",2000); } function echokoto(result){ var hc = eval(result); document.getElementById("hitokoto").innerHTML = hc.hitokoto; } </script>
6、人性化设置
考虑到移动端屏幕大小,还是把移动小人设置为隐藏吧,有助于用户体验,加入下面css即可:
@media (max-width:560px){ .spig{display: none;} }