[player id=”33955999” /]
嗯,图片换成了萌萌哒的chino酱,对当前主题的评论框进行了适配,加入了语音,在特定条件下可以触发。
语音相关代码使用了html5的audio标签,过于老旧的浏览器可能无法正常播放
安装
注意此插件只适用于typecho!其他环境请自行移植
下载插件,安装并启用→ 下载地址
需要jQuery支持
编辑Pet.js文件
/*
*作者木木
*http://www.dao-gu.com
*
*修改journey.ad
*http://lovead.ml
*/
//music陣列用來存放各種音效的路徑
var music = new Array("01.mp3","03.mp3","04.mp3","05.mp3","14.mp3","15.mp3","16.mp3","17.mp3","18.mp3","19.mp3","20.mp3","21.mp3","22.mp3","23.mp3","24.mp3","25.mp3","26.mp3","27.mp3","30.mp3","37.mp3","39.mp3","45.mp3","46.mp3","47.mp3","48.mp3","49.mp3","50.mp3","70.mp3","71.mp3","09.mp3");
function playSound(i){
//指定bgSound其src = 某音效位置
document.getElementById("sound").src ="http://lovead.ml/usr/plugins/Pet/sounds/CHINO_"+ music[i];
}
//右键菜单
jQuery(document).ready(function ($) {
$("#pet").mousedown(function (e) {
if(e.which==3){
showMessage("秘密通道:<br /> <a href=\"http://lovead.ml\" title=\"首页\">首页</a>",10000); //此处自行更改为你自己的地址
}
});
$("#pet").bind("contextmenu", function(e) {
return false;
});
});
//鼠标在消息上时
jQuery(document).ready(function ($) {
$("#message").hover(function () {
$("#message").fadeTo("100", 1);
});
});
//开始
jQuery(document).ready(function ($) {
if (window.title == 'AD\'s Blog') { //如果是主页,这里我用了标题来判断
var now = (new Date()).getHours();
if (now > 0 && now <= 6) {
showMessage(visitor + ' 你是夜猫子呀?', 6000);
playSound(Math.ceil(Math.random()*(26-21)+21));
} else if (now > 6 && now <= 11) {
showMessage(visitor + ' 早上好!', 6000);
playSound(Math.round(Math.random()));
} else if (now > 11 && now <= 14) {
showMessage(visitor + ' 该吃午饭了', 6000);
playSound(2);
} else if (now > 14 && now <= 18) {
showMessage(visitor + ' 到工作时间了', 6000);
playSound(29);
} else {
showMessage(visitor + ' 快来逗我玩吧!', 6000);
playSound(4);
}
}
else {
showMessage('欢迎~</br>' + window.visitor + ',你现在正在读 ' + window.title + ' ', 6000);
playSound(29);
}
$(".pet").animate({
top: $(".pet").offset().top + 300,
left: document.body.offsetWidth - 160
},
{
queue: false,
duration: 1000
});
});
//鼠标点击时
jQuery(document).ready(function ($) {
var stat_click = 0;
$(".mumu").click(function () {
if (!ismove) {
stat_click++;
if (stat_click >=8 ){
msgs = ["哥哥大笨蛋!我不管了!"];
playSound(28);
var i = Math.floor(Math.random() * msgs.length);
//showMessage(msgs[i]);
} else if (stat_click >= 4 && stat_click <=7 ) {
msgs = ["这样的话,只能使用武力了!"];
playSound(20);
var i = Math.floor(Math.random() * msgs.length);
//showMessage(msgs[i]);
} else if (stat_click == 1){
msgs = ["哇…呵呵,想吓我吗?"];
playSound(17);
var i = Math.floor(Math.random() * msgs.length);
//showMessage(msgs[i]);
} else if (stat_click == 2 || 3){
msgs = ["我要生气了哦"];
playSound(18);
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);
$(".pet").animate({
left: document.body.offsetWidth/2*(1+s[i1]),
top: document.body.offsetHeight/6*(1+s[i2])
},
{
duration: 500,
complete: showMessage(msgs[i])
});
} else {
ismove = false;
}
});
});
//鼠标在某些元素上方时
jQuery(document).ready(function ($) {
var pet_x ,pet_y;
$('a.p-title').click(function () {//标题被点击时执行,使用jQuery 选择器
showMessage('正在用吃奶的劲加载《<span style="color:#0099cc;">' + $(this).text() + '</span>》,请稍候…');
$(".pet").animate({
top: $(this).offset().top - 70,
left: $(this).offset().left - 130
},
{
queue: false,
duration: 500
});
});
$('a.p-title').mouseover(function () { //mouseover事件
showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》这篇文章么?');
});
$('div.page a').mouseover(function () {
showMessage('点击就可以前往<span style="color:#0099cc;">' + $(this).text() + '</span>哟~');
});
$('ol.page-navigator li.prev a').mouseover(function(){
showMessage('要翻到上一页吗?');
});
$('ol.page-navigator li.next a').mouseover(function(){
showMessage('要翻到下一页吗?');
});
$("div.friend-link-main li a").mouseover(function () {
showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛');
});
$('div.float-nav a.top,a.reShow').mouseover(function () {
showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向评论栏出发吧!');
});
$('#submit').mouseover(function () {
showMessage('确认提交了么?');
});
$('#emoticon').mouseover(function () {
showMessage('要插入一个萌萌哒的表情吗?');
});
$('#addpic').mouseover(function () {
showMessage('要插入一张外链图片吗?');
});
$('#addlink').mouseover(function () {
showMessage('要插入一个外链吗?小心过多的外链可能会被当作广告哟~');
});
$('ul.ex-menu li').mouseover(function () {
showMessage('点它就可以回到顶部啦!');
});
$('#s').mouseover(function () {
showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!');
movepet('#s');
});
$('#translateLink').mouseover(function () {
showMessage('点击这里可以转换简繁体哟~');
movepet('#translateLink');
});
$('#jad').mouseover(function () {
showMessage('这是我家主人(*´∇`*)');
movepet('#jad');
});
$('ul.post-categories li a,div.right a').mouseover(function () {
showMessage('点它可以查看此分类下的所有文章哟!');
});
$('div.tag a').mouseover(function () {
showMessage('点它可以查看此标签下的所有文章哟!');
});
});
//无聊讲点什么
jQuery(document).ready(function ($) {
window.setInterval(function () {
msgs = [$("#pethitokoto").text()];
var i = Math.floor(Math.random() * msgs.length);
showMessage(msgs[i], 8000);
}, 15000);
});
//评论资料
jQuery(document).ready(function ($) {
$("#author").click(function () {
showMessage("留下你的尊姓大名!");
$(".pet").animate({
top: $("#author").offset().top - 70,
left: $("#author").offset().left - 180
},
{
queue: false,
duration: 1000
});
});
$("#mail").click(function () {
showMessage("留下你的邮箱,不然就是无头像人士了!");
$(".pet").animate({
top: $("#mail").offset().top - 70,
left: $("#mail").offset().left - 130
},
{
queue: false,
duration: 1000
});
});
$("#url").click(function () {
showMessage("快快告诉我你的家在哪里,好让我去参观参观!");
$(".pet").animate({
top: $("#url").offset().top - 70,
left: $("#url").offset().left + 200
},
{
queue: false,
duration: 1000
});
});
$("#textarea").click(function () {
showMessage("认真填写哦!不然会被认作垃圾评论的!");
$(".pet").animate({
top: $("#textarea").offset().top - 70,
left: $("#textarea").offset().left - 180
},
{
queue: false,
duration: 1000
});
});
});
var pet_top = 50;
//滚动条移动
jQuery(document).ready(function ($) {
var f = $(".pet").offset().top;
$(window).scroll(function () {
$(".pet").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 ($) {
$("#pet").mousedown(function (e) {
_move = true;
_x = e.pageX - parseInt($("#pet").css("left"));
_y = e.pageY - parseInt($("#pet").css("top"));
});
$(document).mousemove(function (e) {
if (_move) {
var x = e.pageX - _x;
var y = e.pageY - _y;
var wx = $(window).width() - $('#pet').width();
var dy = $(document).height() - $('#pet').height();
if(x >= 0 && x <= wx && y > 0 && y <= dy) {
$("#pet").css({
top: y,
left: x
}); //控件新位置
ismove = true;
}
}
}).mouseup(function () {
_move = false;
});
});
//位置返回函数
function movepet(a,b){
b = b || 1000; //参数b默认值为1000,即1s
pet_x = $(".pet").css("left");
pet_y = $(".pet").css("top"); //储存之前位置
$(".pet").animate({
top: $(a).offset().top - 70,
left: $(a).offset().left - 130 //移动
},
{
queue: false,
duration: + b
});
$(a).mouseout(function () { //mouseout事件
$(".pet").animate({
top: pet_y,
left: pet_x //返回之前位置
},
{
queue: false,
duration: + b
});
});
};
在
中添加如下一行<audio id="sound" autoplay="autoplay"></audio>
参考资料:
jQuery 参考手册 - 选择器
CSS3 animation-duration 属性
其中用到了数组存储音频文件地址暂时没找到更好的解决方法
音频文件提取自ごちうさアラーム~チノ編~这个APP,这里放一个已经破解和汉化的版本→ 下载地址
单纯的音频文件打包点这里
目前所用的图片原图为这个,P站id为1677090
图片分辨率与默认不一致需要更改Pet.css
插件来源于@Min
语音素材来源于 ごちうさアラーム~チノ編~
最后,点兔赛高!