Loading

给博客加上博客精灵——呜米

参考文章

给博客园加一个会动的小人-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" class="spig">
    <div id="message">……</div>
    <div id="mumu" class="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://blog-static.cnblogs.com/files/timefiles/o_favicon.ico\"/><br/><a href=\"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站主播呜米,你也可以自己改其中的对话。

posted @ 2020-09-24 21:23  二次元攻城狮  阅读(503)  评论(0编辑  收藏  举报