目錄
- 參考文章
- 準備作業
- 所需檔案
- CSS代碼
- html代碼
- spig.js檔案內容
- 添加代碼
參考文章
給博客園加一個會動的小人-spig.js——博客園
博客園加上博客精靈——博客園
注：個人感覺第一篇文章的人物點擊逃跑動作比較好，第二篇的人物與界面內容的互動很精確，我會把兩個代碼綜合了一下，
準備作業
所需檔案
準備好以下兩個檔案：
- 人物圖片：嗚米立繪素材-小尺寸.gif——像素尺寸太大的圖片要壓縮一下，注意改成博客園支持的檔案擴展名，
- js代碼檔案：spig_wm.js——原檔案名是spig.js，中間除錯過幾次檔案內容，如果不改檔案名頁面生效很慢，
注：人物圖片來自B站主播嗚米，圖片經過壓縮沒原來的清晰了，
CSS代碼
.spig {
display:block;
width:175px;
height:246px;
position:absolute;
bottom: 300px;
left:180px;
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:175px;
height:247px;
cursor:move;
background:url(https://blog-static.cnblogs.com/files/timefiles/%E5%91%9C%E7%B1%B3%E7%AB%8B%E7%BB%98%E7%B4%A0%E6%9D%90.ico) no-repeat;
}
注：“ background:url(圖片鏈接) no-repeat;”里面的圖片鏈接可以換成你自己的，圖片尺寸根據需求設定，反正尺寸太大的也顯示不出來，
html代碼
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/timefiles/spig_wm.js"></script>
<!--博客精靈 start*-->
<div id="spig" >
<div id="message">……</div>
<div id="mumu" ></div>
</div>
<script type="text/javascript">
var isindex=true;
var title="";
var visitor="臭DD";
</script>
<!--精靈end*-->
注：把spig_wm.js檔案的鏈接換成你自己，因為里面有博客首頁鏈接要換，
spig.js檔案內容
//右鍵選單
jQuery(document).ready(function ($) {
$("#spig").mousedown(function (e) {
if(e.which==3){
showMessage("秘密通道:<br /> <img src=https://www.cnblogs.com/"https://blog-static.cnblogs.com/files/timefiles/o_favicon.ico\"/><br/><a href=https://www.cnblogs.com/"https://www.cnblogs.com/timefiles/\" title=\"time-flies\">time-flies</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").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 {
showMessage(visitor + ' 快來逗我玩吧！', 6000);
}
}
else {
showMessage('歡迎' + visitor + '來到《' + title + '》', 6000);
}
$(".spig").animate({
top: $(".spig").offset().top + 300,
left: document.body.offsetWidth - 185
},
{
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>》這篇隨筆么？');
});
$('li a').mouseover(function () {
showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛');
});
$('.tbCommentBody').mouseover(function () {
showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向評論欄出發吧！');
});
$('#btn_comment_submit').mouseover(function () {
showMessage('確認提交了么？');
});
$('#q').focus(function () {
showMessage('輸入你想搜索的關鍵詞再按Enter(回車)鍵就可以搜索啦!');
});
});
//無聊講點什么
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 - 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
});
});
$("#tbCommentBody").click(function () {
showMessage("認真填寫哦！不然會被認作垃圾評論的！我的乖乖~");
$(".spig").animate({
top: $("#tbCommentBody").offset().top - 70,
left: $("#tbCommentBody").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 () {
stat_click++;
if (stat_click > 4) {
msgs = ["你有完沒完呀？", "你已經摸我" + stat_click + "次了", "非禮呀！救命！"];
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: document.body.offsetheight/2*(1+s[i1])
},
{
duration: 500,
complete: showMessage(msgs[i])
});
});
});
//顯示訊息函式
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;
});
});
注：“//滑鼠在某些元素上方時”這段代碼我用的是第二篇文章的，其余的代碼都來自第一篇，記得把“showMessage("秘密通道:”里面的鏈接改成自己的，
添加代碼
- 將人物圖片、js代碼檔案上傳到博客園檔案
- 首先需要開通js/html權限
- 在頁面定制 CSS 代碼中加入上面的ccs代碼
- 在頁腳html代碼中加入上面的html代碼，按理說放在頁首、頁腳都可以，只不過我的頁腳代碼目前有位置，
注：我改了js代碼中的一些對話，以貼合人物形象，如果想了解其中的一些梗可以關注B站主播嗚米，你也可以自己改其中的對話，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/121920.html
標籤：其他