博客浮動小人隨機語句飄動代碼分享

博客浮動小人隨機語句飄動代碼分享

好玩代碼樂樂2018-10-21 0:08:145221A+A-

一款漂亮的博客寵物特效,在網上發現的,然后自己整理了下,分享給大家。

博客浮動小人隨機語句飄動代碼分享-第1張圖片-零零娛樂網

效果如上圖,這個源碼使用很簡單,其實有男生版和女生版,這個是男生版,也就是圖片不同而已。。。

有需要其他小人的可以自己找幾張圖片替換就可以了 ,文字在JS代碼里改

首先需要加載下下面的JS即可實現,代碼如下:

加載這個腳本需要 jQuery庫 的支持,所以想要成功添加 浮動小人 ,要先確認你的網站已加載 jQuery庫。

Query庫加載方法:

這里用的百度提供的源,你也可以使用其他的

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

 

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

搞定

博客浮動小人隨機語句飄動代碼分享-第2張圖片-零零娛樂網

感謝您的支持,我會繼續努力的!

博客浮動小人隨機語句飄動代碼分享-第3張圖片-零零娛樂網
掃碼打賞,你說多少就多少

打開支付寶掃一掃,即可進行掃碼打賞哦

點擊這里復制本文地址 以上內容由零零娛樂網整理呈現,請務必在轉載分享時注明本文地址!如對內容有疑問,請聯系我們,謝謝!
  • 1條評論
  • 訪客2019-11-05 08:51:35
  • 這個小人物在html中可以用嗎?

支持Ctrl+Enter提交

零零娛樂網 © All Rights Reserved.  

本站資源來自互聯網收集,僅供用于學習和交流,請遵循相關法律法規,本站一切資源不代表本站立場,如有侵權、后門、不妥請聯系本站刪除

投稿/侵權投訴郵箱:[email protected] 商務合作QQ:563161067

備案:豫ICP備18019668號
聯系我們| 網站地圖| 留言建議| 網站管理

法甲联赛积分榜