chino's smile
[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
chino
post
插件来源于@Min
语音素材来源于 ごちうさアラーム~チノ編~

最后,点兔赛高!