給博客添加一個浮動小人
加載這個腳本須要 jQuery庫 的支持，因此想要成功添加 浮動小人 ，要先確認你的網站已加載 jQuery庫。javascript
- 將如下 CSS 代碼加入到你的 style.css 文件中
.spig {
display: block;
width: 130px;
height: 170px;
position: absolute;
bottom: 300px;
left: 160px;
z-index: 9999;
}
#message {
line-height:170%;
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(「這裏是浮動小人的圖片連接」) no-repeat;
}
- 而後在 body 中添加以下代碼（footer或者header均可以）
<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="這裏填寫spig.js的連接路徑" charset="gb2312"></script>
<div id="spig" class="spig">
<div id="message">加載中……</div>
<div id="mumu" class="mumu"></div>
</div>
<!--.end spig-->
<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', 'https://api.lwl12.com/hitokoto/main/get?encode=json');
document.getElementById("hjsbox").appendChild(hjs);
t=setTimeout("getkoto()",2000);
}
function echokoto(result){
var hc = eval(result);
//$("#hitokoto").fadeTo(300,0);
document.getElementById("hitokoto").innerHTML = hc.hitokoto;
//$("#hitokoto").fadeTo(300,0.75);
}
</script>
- 而後，上傳 spig.js 文件，修改上面代碼中的 兩處路徑 就能夠啦~
jQuery(document).ready(function($) {
$("#spig").mousedown(function(e) {
if (e.which == 3) {
showMessage("祕密通道：<br /> <a href=\"\" title=\"首頁\">首頁</a> <a href=\"\" title=\"訂閱\">訂閱</a> <a href=\"\" 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").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 - 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').focus(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 = [$("#hitokoto").text(), weather.c[0], weather.c[2], weather.c[5], weather.c[7]];
var i = Math.floor(Math.random() * msgs.length);
showMessage(msgs[i], 10000);
},
35000);
});
jQuery(document).ready(function($) {
window.setInterval(function() {
msgs = [$("#hitokoto").text()];
//if(weather.state)msgs.concat(weather.c);
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($) {
$("#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 = [weather.c[0], weather.c[2], weather.c[5], weather.c[7]];
} else 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: 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);
};
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;
});
});
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length)
}
return null;
}
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString()
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/"
}
var weather = Array();
weather.s = false;
jQuery(document).ready(function($) {
var date = new Date();
weather.d = "" + date.getFullYear() + date.getMonth() + date.getDay();
weather.ck = getCookie("weather");
if (weather.ck == null || weather.d != getCookie("wea_tstamp")) {
$.ajax({
dataType: "jsonp",
success: function(data) {
if (data.success != 1) {
return;
}
weather.s = true;
weather.c = Array();
weather.c[0] = "今天是" + data.result[0].days + "，" + data.result[0].week;
weather.c[1] = data.result[0].citynm + "今天" + data.result[0].temp_high + "°C到" + data.result[0].temp_low + "°C";
weather.c[2] = data.result[0].citynm + "今天" + data.result[0].weather;
weather.c[3] = data.result[0].citynm + "今天" + data.result[0].winp + "，" + data.result[0].wind;
weather.c[4] = data.result[0].citynm + "明天" + data.result[1].temp_high + "°C到" + data.result[1].temp_low + "°C";
weather.c[5] = data.result[0].citynm + "明天" + data.result[1].weather;
weather.c[6] = data.result[0].citynm + "後天" + data.result[2].temp_high + "°C到" + data.result[2].temp_low + "°C";
weather.c[7] = data.result[0].citynm + "後天" + data.result[2].weather;
setCookie("wea_tstamp", weather.d, 1);
setCookie("weather", encodeURI(weather.c.join(",")), 1);
},
type: "GET",
url: "https://myhloliapi.sinaapp.com/weather/?callback=?"
});
} else {
weather.s = true;
weather.c = decodeURI(weather.ck).split(",");
}
});
相關文章
- 1. 博客頁面添加動態小人
- 2. [博客美化]給你博客添加一個萌萌的看板娘吧
- 3. 博客園樣式美化：給博客添加一個音樂播放器
- 4. 給hexo博客的NEXT主題添加一個雲日曆
- 5. 添加博客
- 6. 給博客添加打賞功能
- 7. Hexo博客添加一言
- 8. 個人博客小家
- 9. 個人第一個博客
- 10. Hexo博客添加live2d卡通人物
- 更多相關文章...
- • ionic 浮動框 - ionic 教程
- • Eclipse 添加書籤 - Eclipse 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 博客頁面添加動態小人
- 2. [博客美化]給你博客添加一個萌萌的看板娘吧
- 3. 博客園樣式美化：給博客添加一個音樂播放器
- 4. 給hexo博客的NEXT主題添加一個雲日曆
- 5. 添加博客
- 6. 給博客添加打賞功能
- 7. Hexo博客添加一言
- 8. 個人博客小家
- 9. 個人第一個博客
- 10. Hexo博客添加live2d卡通人物