博客漂浮的小人

Html結構

  <div id="spig" class="spig">
        <div id="message">……</div>
        <div id="mumu" class="mumu"></div>
    </div>

css樣式

.spig{
    width:130px;
    height:170px;
    position:absolute;
    bottom: 300px;
    left:160px;
    z-index:99999;
        background:transparent
}
#message{
    border: 1px solid #c4c4c4;
    border-radius:5px;
    min-height:1em;
    top:-45px;
    position:absolute;
    text-align:center;
    width:auto !important;
    z-index:90000;
    border-color:#eeeeee;
    box-shadow:0 0 15px #eeeeee;
    outline:none;
}
.mumu{width:130px;height:170px;cursor: move;background:url(http://images.cnblogs.com/cnblogs_com/gaoht/1257689/o_boy.png) no-repeat;}

js文件

//右鍵菜單
jQuery(document).ready(function ($) {
    $(document.body).append(
        `<div id="spig" class="spig"><div id="message">加載中……</div><div id="mumu" class="mumu"></div></div>`
    );
    $("#spig").mousedown(function (e) {
        if (e.which == 3) {
            showMessage(
                "秘密通道:<br /> <a style='color: #5bf71d' href=\"https://github.com/ght5935\" title=\"gitHub\">gitHub</a> ",
                10000);
        }
    });
    $("#spig").bind("contextmenu", function (e) {
        return false;
    });
});

//鼠標在消息上時
jQuery(document).ready(function ($) {
    $("#message").hover(function () {
        $("#message").fadeTo("100", 1);
    });
});
// 文本復制提示
try {
    document.body.oncopy = function () {
        alert("復制成功！若要轉載請務必保留原文鏈接，申明來源，謝謝合作！")
    }
} catch (e) {}

//鼠標在上方時
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)
    });
});

//開始
var visitor = $('#tbCommentAuthor').val();
jQuery(document).ready(function ($) {
    if (visitor == 'echo丶若夢') { //如果是主頁  isindex
        showMessage('主人你來啦...', 6000);
    } else {
        showMessage('歡迎' + visitor + '來到若夢博客閱讀 ' + ' ', 6000);
    }
    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 if (now > 18 && now <= 22) {
        showMessage(visitor + ' 晚上了啊,是不是該睡覺啦！', 6000);
    } else {
        showMessage(visitor + ' 快來逗我玩吧！', 6000);
    }


    $(".spig").animate({
        top: $(".spig").offset().top + 300,
        left: document.body.offsetWidth - 160
    }, {
        queue: false,
        duration: 1000
    });
});

//鼠標在某些元素上方時
jQuery(document).ready(function ($) {
    $('.postTitle a').click(function () { //標題被點擊時
        showMessage('正在用吃奶的勁加載《<span style="color:#0099cc;">' + $(this).text() + '</span>》請稍候');
    });

    $('.postTitle a').mouseover(function () {
        showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》這篇文章么？');
    });
    $('.pager').mouseover(function () {
        showMessage('是要翻頁了嗎?');
    });

    $('#nav_next_page').mouseover(function () {
        showMessage('要翻到下一頁嗎?');
    });

    $('#sidebar_postcategory li a').mouseover(function () {
        showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛');
    });

    $('.comment_textarea').mouseover(function () {
        showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向評論欄出發吧！');
    });

    $('#btn_comment_submit').mouseover(function () {
        showMessage('確認提交了么？');
    });

    $('#sidebar_shortcut').mouseover(function () {
        showMessage('點擊跳到想看的鏈接哈');
    });

    $('#sidebar_toptags').mouseover(function () {
        showMessage('點擊查看此標簽下的所有文章了');
    });

    $('#sidebar_categories').mouseover(function () {
        showMessage('點擊查看此分類下得所有文章');
    });

    $('#sideCatalogBtn').mouseover(function () {
        showMessage('我是目錄啊...');
    });

    $('#q').focus(function () {
        showMessage('輸入你想搜索的關鍵詞再按Enter(回車)鍵就可以搜索啦!');
        $(".spig").animate({
            top: $("#q").offset().top - 70,
            left: $("#q").offset().left - 170
        }, {
            queue: false,
            duration: 1000
        });
    });

});


//無聊講點什么
jQuery(document).ready(function ($) {

    window.setInterval(function () {
        msgs = ["我得意地飄！~飄！~", "看我筋斗雲...哎呀,翻過了~~", "你抓不到我喔，你這個傻瓜!~"];
        var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i], 10000);
    }, 35000);
});

//無聊動動
jQuery(document).ready(function ($) {
    window.setInterval(function () {
        msgs = ["你是不是無聊呀！", "不和若夢玩了么~", "是不是不喜歡我呀...", "天行健君子...", "摸摸頭,摸摸頭...", ];
        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
        });
    });
    $("#tbCommentBody").mouseover(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 () {
        if (!ismove) {
            stat_click++;
            if (stat_click > 4) {
                msgs = ["你有完沒完呀？", "你已經摸我" + stat_click + "次了", "你是不是喜歡我呀 !"];
                var i = Math.floor(Math.random() * msgs.length);
            } else {
                msgs = ["筋斗雲！~我飛！", "別摸我，有什么好摸的！", "惹不起你，我還躲不起你么？", "不要摸我了，我會咬你你的！ 哼哼",
                    "喜歡我的話,就告訴我呀 ~~"];
                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: 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);
    jQuery("#message").css({
        "opacity": "0.5",
        "color": '#1fec0c',
        "background": '#333',
        "padding": '10px',
        "box-sizing": "border-box",
        "border-radius": '10px',
        "text-shadow": '1px 1px #3305f8'
    });
};

//拖動
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 ($) {
    $.fn.extend({
        Scroll: function (opt, callback) {
            if (!opt) {
                var opt = {}
            }
            var _this = this.eq(0).find("ul:first");
            var lineH = _this.find("li:first").height(),
                line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
                speed = opt.speed ? parseInt(opt.speed, 10) : 7000,
                timer = opt.timer ? parseInt(opt.timer, 10) : 7000;
            if (line == 0) {
                line = 1
            }
            var upHeight = 0 - line * lineH;
            scrollUp = function () {
                _this.animate({
                    marginTop: upHeight
                }, speed, function () {
                    for (i = 1; i <= line; i++) {
                        _this.find("li:first").appendTo(_this)
                    }
                    _this.css({
                        marginTop: 0
                    })
                })
            };
            _this.hover(function () {
                clearInterval(timerID)
            }, function () {
                timerID = setInterval("scrollUp()", timer)
            }).mouseout()
        }
    })
})(jQuery);
$(document).ready(function () {
    $(".bulletin").Scroll({
        line: 1,
        speed: 1000,
        timer: 5000
    })
});
try {
    if (window.console && window.console.log) {
        console.log("%c歡迎訪問若夢的博客！", "color:green");
    }
} catch (e) {}
var sweetTitles = {
    x: 10,
    y: 20,
    tipElements: "a",
    noTitle: true,
    init: function () {
        var noTitle = this.noTitle;
        $(this.tipElements).each(function () { // 獲取所有的a標簽console.log(this)

            $(this).mouseover(function (e) {
                if (noTitle) {
                    isTitle = true
                } else {
                    isTitle = $.trim(this.title) != ""
                }
                if (isTitle) {
                    this.title = this.innerText;
                    this.myTitle = this.title;
                    this.myHref = this.href;
                    this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,
                        30) + "..." : this.myHref);
                    this.title = "";

                    showMessage(this.myTitle)
                }
            }).mouseout(function () {
                if (this.myTitle != null) {
                    this.title = this.myTitle;

                }
            }).mousemove(function (e) {

            })
        })
    }
};
$(function () {
    sweetTitles.init()
});

引入方式

js文件的所在位置

css部分可以 頁面定制CSS代碼

注： 如果按照上述操作，沒有出來的小伙伴，請檢查一下是否引入的有jq.