给博客添加一个浮动小人

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

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

 

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

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

10

加载这个脚本需要 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(",");
    }
});

搞定~


  • 33 只已被捕捉
    • 饭真爱情故事网 Chrome | 45.0.2454.101 Windows 7

      我弄上始终不显示小人 文字这些倒正常 求教

      • 千千 Chrome | 60.0.3107.4 Windows 10

        文字正常的话就是里面的图片没有获取到咯~CSS里面需要填写图片链接看看有没有加上

        • 饭真爱情故事网 Chrome | 45.0.2454.101 Windows 7

          肯定加上了的

          • 千千 Chrome | 60.0.3107.4 Windows 10

            那看看控制台下有没有什么出错信息,会不会是图片获取404了

            • 饭真爱情故事网 Chrome | 45.0.2454.101 Windows 7

              果然图片获取404了 什么原因?

            • 千千 Chrome | 60.0.3107.4 Windows 10

              就是那一个图片链接下并没有找到相应的资源咯

            • 饭真爱情故事网 Chrome | 45.0.2454.101 Windows 7

              明白了 获取路径错误了

            • 千千 Chrome | 60.0.3107.4 Windows 10

              嗯呢,改对就好啦~ヾ(≧∇≦*)ゝ

    • 孟圆 Chrome | 56.0.2924.87 Windows 10

      好玩

      • 千千 Edge | 15.15048 Windows 10

        也可以给你添加一个哦

    • Stephen Chrome | 52.0.2743.116 Windows 10

      (^・ω・^ )互粉啊,千

      • 千千 Chrome | 49.0.2623.75 Windows 10

        O(∩_∩)O好的,哈~

    • ZhuYan's Vip Chrome | 45.0.2454.101 Windows 10

      博主出现乱码是怎么回事

      • 千千 Edge | 14.14393 Windows 10 Moblie

        js里面么?还是弄好之后小人说的话是乱码?

        • ZhuYan's Vip Chrome | 45.0.2454.101 Windows 10

          js里面正常 弄好小人说话就是乱码

          • 千千 猎豹安全浏览器 Windows 10

            你的站点页面是GBK编码吧!需要加一个标签把小人这部分转换成UTF-8哦!

            • ZhuYan's Vip Chrome | 45.0.2454.101 Windows 10

              哎 乱码解决了 小人又不显示 我添加了图片

            • 千千 猎豹安全浏览器 Windows 10

              如果文字显示正常的话应该是缓存问题,刷新看看,如果文字显示有问题就是没有链接到CSS咯

    • 闲鱼 QQ浏览器 | 9.4.8309.400 Windows 7

      之前也玩过这个,后来整体风格不适合就撤了你这个是故意没弄小人图片的吗?显示没有

      • 千千 Edge | 14.14383 Windows 10 Moblie

        我在谷歌浏览器上看到的是正常的,应该是缓存问题

      • 千千 猎豹安全浏览器 Windows 10

        原来是CSS中图片链接有换行,233333

        • 闲鱼 QQ浏览器 | 9.4.8309.400 Windows 7

          我就说怎么不对了

          • 千千 Chrome | 53.0.2763.0 Windows 10

            前些天在社会实践,然后没有电脑的说~所以没有仔细去看