给xiu主题添加一个浮动小人

Author: 陌小雨Date: 2017-10-15View: 199

浮动小人很有爱:

1、js

另存为js,引用或者合并到主题的js文件中

//右键菜单
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage("秘密通道:<br />    <a href=\"https://dedewp.com\" title=\"回首页\">回首页</a>    <a href=\"https://dedewp.com/bai-no-du/\" title=\"项目\">加入VIP</a>    <a href=\"https://dedewp.com/online-music/\" 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").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('你是夜猫子呀?还不睡觉,明天起的来么你?', 6000);
        } else if (now > 6 && now <= 11) {
            showMessage('早上好,早起的鸟儿有虫吃噢!早起的虫儿被鸟吃,你是鸟儿还是虫儿?嘻嘻!', 6000);
        } else if (now > 11 && now <= 14) {
            showMessage('中午了,吃饭了么?不要饿着了,饿死了谁来挺我呀!', 6000);
        } else if (now > 14 && now <= 18) {
            showMessage('中午的时光真难熬!还好有你在!', 6000);
        } else {
            showMessage('快来逗我玩吧!', 6000);
        }
    }
    else {
        showMessage('欢迎您来到陌小雨博客阅读 ' + 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>》这篇文章么?');
    });
    $('#submit').mouseover(function () {
        showMessage('确认提交了么?');
    });
    $('.form-control').focus(function () {
        showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!');
    });
    $('.article-nav-prev a').mouseover(function () {
        showMessage('点它可以查看前一篇文章!');
    });
    $('.article-nav-next a').mouseover(function () {
        showMessage('点它可以查看后一篇文章!');
    });
    $('.action-like').mouseover(function () {
        showMessage('喜欢就点赞吧!');
    });
    $('.logo a').mouseover(function () {
        showMessage('点它就可以回到首页啦!');
    });
    $('.feed-tqq').mouseover(function () {
        showMessage('我们成为好基友吧!');
    });
    $('.feed-weixin').mouseover(function () {
        showMessage('关注就送福利哦!');
    });
    $('.article-meta a').mouseover(function () {
        showMessage('点击查看此分类下的所有文章');
    });
    $('.action-share a').mouseover(function () {
        showMessage('你知道吗点它可以分享本文到'+$(this).attr('title'));
    });
    $('.or').mouseover(function(){
        showMessage('欢迎土豪打赏!');
    });
});

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 - 120
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
    $("#email").click(function () {
        showMessage("留下你的邮箱,不然就是无头像人士了!");
        $(".spig").animate({
            top: $("#email").offset().top - 70,
            left: $("#email").offset().left - 120
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
    $("#url").click(function () {

        showMessage("快快告诉我你的家在哪里,好让我去参观参观!");
        $(".spig").animate({
            top: $("#url").offset().top - 70,
            left: $("#url").offset().left - 120
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
    $("#comment").click(function () {
        showMessage("认真填写哦!不然会被认作垃圾评论的!我的乖乖~");
        $(".spig").animate({
            top: $("#comment").offset().top - 70,
            left: $("#comment").offset().left - 120
        },
		{
		    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
		});
    });
});


//显示消息函数 
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;
    });
});

2、下面代码加到 footer.php 底部文件 body 标志前

<script type="text/javascript">
<?php if(is_home()) echo 'var isindex=true;var title="";';else echo 'var isindex=false;var title="',  get_the_title(),'";'; ?>
</script>
<div id="spig" class="spig"><div id="message">加载中……</div><div id="mumu" class="mumu"></div></div>

3、加载css

/*浮动小人*/
.spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;left:160px;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:130px;height:170px;cursor: move;background:url(https://dedewp.com/wp-content/themes/xiu2.1/images/spig.png) no-repeat;}

4、浮动小人素材下载

浮动小人素材1

spig2

spig3

spig4 spig5 spig6 spig7

5、折腾版本(加入一言,方法来自:https://myhloli.com/hitokoto.html)

(1)找到第1步代码中的

msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];

修改为:

//msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "谁淫荡呀~谁淫荡,你淫荡呀!~~你淫荡!~~", "从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];
msgs = [$("#hitokoto").text()];

(2)在第2步代码后面加上

<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', 'http://api.hitokoto.us/randuid=3221&encode=jsc&fun=echokoto');
                document.getElementById("hjsbox").appendChild(hjs);
                t=setTimeout("getkoto()",2000);
            }
            function echokoto(result){
                var hc = eval(result);
                document.getElementById("hitokoto").innerHTML = hc.hitokoto;
            }
    </script>

6、人性化设置

考虑到移动端屏幕大小,还是把移动小人设置为隐藏吧,有助于用户体验,加入下面css即可:

@media (max-width:560px){
    .spig{display: none;}
}