給博客園加一個會動的小人-spig.js

来源:https://www.cnblogs.com/zwfymqz/archive/2019/03/15/10538908.html
-Advertisement-
Play Games

給博客園加一個會動的小人 spig.js 效果大概是這樣，感覺十分可愛qvq 那麼怎麼添加呢？ 首先需要開通js/html許可權。 然後在 中加入以下代碼 在側邊欄css中加入以下代碼(註意有個地方需要自己填圖片地址) 上面鏈接內的js文件如下，裡面有一些地方需要自己修改。 順便吐槽一句，原作者給的a ...


給博客園加一個會動的小人-spig.js

效果大概是這樣，感覺十分可愛qvq

image

image

那麼怎麼添加呢？

首先需要開通js/html許可權。

然後在頁腳html代碼中加入以下代碼

<script src="這裡填spig.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="這位怪蜀黍";
</script>
<!--精靈end*-->

在側邊欄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:246px;cursor: move;background:url(這裡填圖片地址) no-repeat;}

上面鏈接內的js文件如下，裡面有一些地方需要自己修改。

順便吐槽一句，原作者給的api都掛的差不多了，然鵝我是個js菜雞連get/post都不會，所以湊合著改了一下api，歡迎各位大佬給出更好的解決方案qwq


//右鍵菜單
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage("秘密通道:<br />    <img src=\"http://pic.sc.chinaz.com/Files/pic/Listfaces/3646/02.gif\"/><br/><a href=\"http://cnblogs.com/zwfymqz\" 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 - 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>》這篇隨筆麽？');
    });
    $('#prev-page').mouseover(function(){
        showMessage('要翻到上一頁嗎?');
    });
    $('#next-page').mouseover(function(){
        showMessage('要翻到下一頁嗎?');
    });
    $('#index-links li a').mouseover(function () {
        showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛');
    });
    $('.tbCommentBodys').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 = [ "陪我聊天吧！", "好無聊哦，你都不陪我玩！", "…@……!………", "^%#&*!@*(&#)(!)(", "我可愛吧！嘻嘻!~^_^!~~","誰淫蕩呀?~誰淫蕩?，你淫蕩呀!~~你淫蕩！~~","從前有座山，山上有座廟，廟裡有個老和尚給小和尚講故事，講：“從前有座……”"];
        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 + "次了", "非禮呀！救命！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])
            });
        
    });
});


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

參考資料

博客園加上博客精靈

圖片是扒的某一位大佬的但是我忘記他的網址了qwq


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQL分頁過多時, 如何優化
    問題： 我們經常會使用到分頁操作，這裡有個問題，在偏移量非常大的時候，它會導致MySQL掃描大量不需要的行然後再拋棄掉。如： 上述這條SQL語句需要查詢10020條記錄然後只返回最後20條。前面的10000條記錄都將被拋棄，這樣代價非常高。 方法一、延遲關聯 優化此類分類查詢的一個最簡單的辦法就是盡 ...
  • 刪除表中多餘的重覆記錄，重覆記錄是根據單個欄位（Id）來判斷，只留有rowid最小的記錄
    delete from Resource where Title in (select Title from Resource group by Title having count(Title) > 1) and Id not in (select min(Id) from Resource gr ...
  • 在hue平臺上使用oozie工作流調度
    在實習期間，公司使用的hue平臺做的數倉，下麵就簡單介紹一下hue的一些使用的註意事項，主要是工作流的使用和調度 進入hue首頁： Workflow是工作流，Schedule是調度工作流的，如設置工作流何時跑，周期是多久，等等，下麵會詳細介紹，Bundle是綁定多個調度，暫時我沒有用上 等使用後再更 ...
  • MySQL——安裝
    1. 下載源： http://repo.mysql.com/yum/mysql-8.0-community/el/7/x86_64/mysql80-community-release-el7-2.noarch.rpm 該源目前為8.0版本，如果需要最新請退至根目錄找。 2. 安裝源 3. 查看是否安 ...
  • MySQl ifnull()和substr()
    SUBSTR(str,pos,len) substr用來截取字元串； str 被截取的字元串 pos 開始位置 len 長度 舉個例子： IFNULL(expr1,expr2) 判斷函數，判斷expr1是否為空，如果為空返回expr2, 如果不為空則返回expr1。 舉個例子： ...
  • 你想知道的3D Touch開發全在這裡了
    iPhone 6s和iPhone 6s Plus為多點觸摸界面帶來了強大的3D觸摸新維度。這項新技術可以感知用戶按下顯示屏的深度，讓他們比以往任何時候都更能使用你的應用程式和游戲。 ...
  • C:\Program Files\Java\jdk1.7.0_79\bin\java.exe'' finished with non-zero exit value 1
    轉載請標明出處：https://www.cnblogs.com/tangZH/p/10538982.html 今天，在項目過程中碰到了這個奇怪的問題，C:\Program Files\Java\jdk1.7.0_79\bin\java.exe'' finished with non-zero exi ...
  • JavaScript面向對象--封裝
    一、封裝的概念 面向對象的類包括兩大成員，一種是暴露給外部的介面，另一種是只在類內部才能訪問的私有屬性。在這個類被實例化成對象後，用戶只能通過操作給定的介面來訪問該類內部的私有屬性，這就被稱為面向對象的封裝性。 二、ES5如何實現封裝 這裡只說一種方法，就是通過閉包。 可以看下這個例子，在構造函數（ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類