给博客添加一个浮动小人

第一次是在 幻杀博客 中看到的这个浮动小人，然后当时没有找到教程，就只能在源码中抓取了~

不过整个网页源代码好多好多，筛选了好久才从中提取出来……

首先说明一下它的 作者 是 木木 ~ 不是我啦~

图片是自己用 PS 扣出来的，因为基本不会 PS ，所以花了好长时间才弄好😔

加载这个脚本需要 jQuery库 的支持，所以想要成功添加 浮动小人 ，要先确认你的网站已加载 jQuery库。

• 将以下 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>

其中有两个 PHP 的代码段是针对 wordpress 设计的，如果你使用的不是 wordpress 可删去，另外，木木原版的作品中接入的一言api虽然可以在 http:// 中使用，但是假如你的站点开启了 https:// ，继续使用它便会出现警告啦~

这个时候有我们的 LWL 替我们解围，所以不用担心……😄

一言json:

//请求地址 
https://api.lwl12.com/hitokoto/main/get?encode=json

//返回
echokoto({"code":200,"hitokoto":"人类因为畏惧黑暗，所以用火消除黑暗以求生存。"})

另外：原获取天气的 api 已失效，每次访问那个网页都是未备案😔，不知道现在怎么样了~

总之，我们可以替换 spig.js 中获取天气的 api —— 吶，这个可以用（来源：萝莉社）

https://myhloliapi.sinaapp.com/weather/?callback=?

然后，上传 spig.js 文件，修改上面代码中的 两处路径 就可以啦~

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(",");
    }
});

搞定~