部落格園背景頁面動態特效
阿新 • • 發佈：2020-08-25
1.設定動畫首先要申請許可權
1.1首先進入[我的部落格園]，進入[管理]中的[設定]
1.2找到[部落格側邊欄公告]，並點選[申請JS許可權]
1.3編寫申請js許可權內容（示例如下）
尊敬的部落格園管理員：
請問是否可以幫我開通js許可權，我想對文章的樣式和佈局需要js程式碼進行調整外觀。
謝謝您的幫助。
尊敬的部落格園管理員：
您好，我希望用JS美化下我的部落格頁面，麻煩通過下我的JS許可權申請。
謝謝您的幫助。
ps：在申請時，要耐心等待，稽核不通過可以多換幾個內容試試，我是一次就通過了，大概等了1個小時左右^-^ ^-^
1.4通過稽核的狀態，下面就可以開始設定動態效果了！！
2.背景的動態線狀粒子特效
2.1滑鼠停置，會自動吸附線條，效果圖如下
2.2首先匯入js檔案，在這裡選擇檔案——上傳就可以了，或者直接用我的src路徑（這一步主要是為了給動畫js的路徑）
js檔案連線，複製連結，拷貝js：https://blog-static.cnblogs.com/files/liyhbk/canvas-nest.js
2.3如果自己上傳了檔案，獲取連線，則將src路徑變成自己的
2.4把這段程式碼複製到————頁首 HTML 程式碼中
<!-- 線條背景動畫 --> <script type="text/javascript" color="0,0,0" opacity='1' zIndex="-2" count="100000" src="https://blog-static.cnblogs.com/files/liyhbk/canvas-nest.js"></script>
2.5引數
- color: 線條顏色，預設：‘0，0，0’；三個數字分別為(R,G,B),注意使用，分割
- opacity: 線條透明度0~1,預設0.5
- count: 線條總數量，預設150
- z-Index: 背景的z-Index屬性，css用於控制所在層的位置，預設-1
3.通知欄公告live2D動畫
3.1效果圖如下：
3.2將此程式碼貼入側邊公告欄中
<!--公告處的人物 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=UTF-8" /> <title>Live2D</title> <link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/monster-jian/live2d.min.js"></script> <script src="https://blog-static.cnblogs.com/files/monster-jian/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> <ml> <link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/flat-ui.min.css"/>
4.滑鼠點選愛心特效
4.1效果圖如下：
4.2將此程式碼貼入——頁尾 HTML 程式碼
<!--點選愛心特效--> <script type="text/javascript"> //需要jquery外掛 /* 滑鼠特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤不做鹹魚！❤","❤拒絕懶惰！❤","❤想做吃貨❤","❤向大佬學習❤","❤扶我起來~❤","❤come on❤","❤一直在路上~❤","❤累了~❤","❤再趴一會❤","❤66666❤","❤高興的飛起*****❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
5.滑鼠點選火花特效
5.1效果圖如下：
5.2將此程式碼貼入——頁尾 HTML程式碼（接著之前的貼上就行）
<!--點選火花特效--> <script src="https://files.cnblogs.com/files/monster-jian/mouse-click.js"></script> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
6.滑鼠樣式動畫
6.1效果如下
6.2將此程式碼貼入——頁面定製 CSS 程式碼 中
/*滑鼠樣式動畫*/ body{ background-repeat: repeat; background-attachment: fixed; background-size:cover; cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico),auto; }
7.滑鼠樣式動畫
7.1效果如下，在頁面左下角有人物
7.2將此程式碼貼入——頁尾 HTML程式碼中
<!--右下角人物 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!--小帥哥： https://unpkg.com/[email protected]/assets/chitose.model.json-->
<!--萌娘：https://unpkg.com/[email protected]/assets/shizuku.model.json-->
<!--小可愛（女）：https://unpkg.com/[email protected]/assets/koharu.model.json-->
<!--小可愛（男）：https://unpkg.com/[email protected]/assets/haruto.model.json-->
<!--初音：https://unpkg.com/[email protected]/assets/miku.model.json-->
<!-- 上邊的不同連結顯示的是不同的小人，這個可以根據需要來選擇 下邊的初始化部分，可以修改寬高來修改小人的大小，或者是滑鼠移動到小人上的透明度，也可以修改小人在頁面出現的位置。 -->
<script>
/*https://unpkg.com/[email protected]/assets/shizuku.model.json*/
L2Dwidget.init({ "model": { jsonPath:
"https://unpkg.com/[email protected]/assets/haruto.model.json",
"scale": 1 }, "display": { "position": "left", "width": 66, "height": 88,
"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>
7.3根據自己的喜好，修改展示內容
8.可點選可移動的二次元小人
8.1隨著頁面移動，效果如下：
8.2css程式碼
/*右側滑動小人*/ .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;font-size:0.16rem} .mumu{width:1.75rem;height:2.46rem;cursor: move;background:url(https://blog-static.cnblogs.com/files/ggymx/gril.gif) no-repeat;background-size:100% 100%}
8.3HTML程式碼
<!--部落格精靈 start*--> <div id="spig" class="spig"> <div id="message">……</div> <div id="mumu" class="mumu"></div> </div>
8.4js程式碼
var isindex=true; var title=""; var visitor="這位怪蜀黍"; //根據解析度調整小人位置 var addHeight; if(window.screen.height=='1080'){ addHeight= 700; }else{ addHeight= 400; } //右鍵選單 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=\"https://www.cnblogs.com/ggymx\" 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); } console.log('螢幕解析度---------',window.screen.height) $(".spig").animate({ top:$(".spig").offset().top+addHeight, 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 +addHeight }, { 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; }); });js程式碼
9.背景圖片定時更新
9.1css程式碼
body { background-repeat: no-repeat; background: rgba(12, 100, 129, 0) url('https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231104242bg2.jpg') fixed; background-position: 100% 50%; background-size: 100% 100%; }
9.2js程式碼
(function(){ var i=0; //需要更新的背景圖 var bgArr=['https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231104242bg2.jpg', 'https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231103334bg1.jpg', 'https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231111316bg3.jpg'] setInterval(function(){ $("body").css({"background-image":`url(${bgArr[i]})`}); //document.getElementsByTagName('body')[0].style.backgroundImage=`url(${bgArr[i]})`; if(i==bgArr.length-1){ i=0; }else{ i++; } },3000); })();
ps:可以在部落格園的相簿中上傳自己喜歡的背景圖，然後複製連結新增到裡面即可
10.完成樣式展示
11.以上幾種樣式中的URL，src 有帶js檔案，都是自己的檔案路徑，都可複製連結另尋為自己的js檔案或其他格式檔案，上傳到自己的檔案中，如圖所示：
個人部落格地址：https://www.cnblogs.com/liyhbk/