- A+
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/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
<!--萌娘:https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
<!--小可爱(女):https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
<!--小可爱(男):https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
<!--初音:https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
<!-- 上边的不同链接显示的是不同的小人,这个可以根据需要来选择 下边的初始化部分,可以修改宽高来修改小人的大小,或者是鼠标移动到小人上的透明度,也可以修改小人在页面出现的位置。 -->
<script>
/*https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json*/
L2Dwidget.init({ "model": { jsonPath:
"https://unpkg.com/live2d-widget-model-haruto@1.0.5/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" alt="博客园背景页面动态特效"/><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文件或其他格式文件,上传到自己的文件中,如图所示: