博客园自定义(全部样式分享)
博客园自定义
更新后的代码2021.12.08
<script type="text/javascript"> /*标签云的动态效果*/ function gotoTop(){ setTimeout(function(){ document.documentElement.scrollTop = (document.documentElement.scrollTop*0.1); document.body.scrollTop = (document.body.scrollTop - document.body.scrollTop*0.1); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop > 0){ gotoTop(); } },10); } var Ftimer = setInterval (Ftoggle,1000), contral = [false,false]; function Ftoggle(){ var tagObjbox = document.getElementsByClassName('catListTag')[0], tagObj = tagObjbox.getElementsByTagName('li'), navList = document.getElementById('navList'); if(tagObjbox && tagObj){ contral[1]=true; SlideTag(tagObj); } if(navList){ contral[2]=true; AddLi(navList); } if(contral[1] & contral[2]){ clearInterval(Ftimer); } } function AddLi(e){ var li = document.createElement('li'), a = document.createElement('a'); a.innerHTML = '(‾◡◝)'; a.className = 'menu'; a.href = 'https://www.cnblogs.com/cainiao-chuanqi/tag/'; li.appendChild(a); e.appendChild(li); } function SlideTag(tagObj){ offset = true; PreSeting(); for(var i=0;i<tagObj.length;i++){ (function(i){ tagObj[i].onmouseover = function(){ offset = false; index = parseInt(this.style.zIndex); this.style.zIndex = 9999; } tagObj[i].onmouseout = function(){ offset = true; this.style.zIndex = index; } })(i); } setInterval(PreSeting,5000) function F_getSJS(x,y,z){ var int = null; if(!z) { z = 6} while(int >= x || int <= y || int === null){ int = Math.random(); int = (int.toFixed(z) * x).toFixed(0); } return int; } function PreSeting(){ if(offset){ for(var i=0;i<tagObj.length;i++){ tagObj[i].style.left = F_getSJS(100,30,10) + 'px'; tagObj[i].style.top = F_getSJS(200,30,10) + 'px'; tagObj[i].style.backgroundColor = 'rgb(' + F_getSJS(256,-1,5) + ',' + F_getSJS(256,-1,10) + ',' + F_getSJS(256,-1,15) + ')'; tagObj[i].style.zIndex = F_getSJS(200,0,16); } } } } onload = function(){ if(location.href == 'https://www.cnblogs.com/cainiao-chuanqi/' || location.href == 'https://www.cnblogs.com/cainiao-chuanqi/'){setTimeout(goto,3000);} function goto(){ document.getElementById('headbox').style.display = 'block'; document.documentElement.scrollTop = document.documentElement.scrollTop + 200; document.body.scrollTop = document.body.scrollTop + 200; } } </script> <script type="text/javascript"> /*设置目录（侧边HTML代码）*/ //以下是锚点JS var a = $(document); a.ready(function() { var b = $('body'), d = 'sideToolbar', e = 'sideCatalog', f = 'sideCatalog-catalog', g = 'sideCatalogBtn', h = 'sideToolbar-up', i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom: 1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>', j = '', k = 200, l = 0, m = 0, n = 0, //限制存在个数，如数量过多，则只显示h2，不显示h3 //o, p = 13, o, p = 100, q = true, r = true, s = b; if(s.length === 0) { return }; b.append(i); //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 //o = s.find(':header'); o = $('#cnblogs_post_body').find(':header') if(o.length > p) { r = false; var t = s.find('h2'); var u = s.find('h3'); if(t.length + u.length > p) { q = false } }; o.each(function(t) { var u = $(this), v = u[0]; var title = u.text(); var text = u.text(); u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //if (!u.attr('id')) { // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //}; if(v.localName === 'h2') { l++; m = 0; if(text.length > 14) text = text.substr(0, 20) + "..."; j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; } else if(v.localName === 'h3') { m++; n = 0; if(q) { if(text.length > 12) text = text.substr(0, 16) + "..."; j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; } } else if(v.localName === 'h4') { n++; if(r) { j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; } } }); $('#' + f + '>ul').html(j); b.data('spy', 'scroll'); b.data('target', '.sideCatalogBg'); $('body').scrollspy({ target: '.sideCatalogBg' }); $sideCatelog = $('#' + e); $('#' + g).on('click', function() { if($(this).hasClass('sideCatalogBtnDisable')) { $sideCatelog.css('visibility', 'hidden') } else { $sideCatelog.css('visibility', 'visible') }; $(this).toggleClass('sideCatalogBtnDisable') }); $('#' + h).on('click', function() { $("html,body").animate({ scrollTop: 0 }, 500) }); $sideToolbar = $('#' + d); //通过判断评论框是否存在显示索引目录 var commentDiv = $("#blog-comments-placeholder"); a.on('scroll', function() { //评论框存在才调用方法 if(commentDiv.length > 0) { var t = a.scrollTop(); if(t > k) { $sideToolbar.css('display', 'block'); $('#gotop').show() } else { $sideToolbar.css('display', 'none') $('#gotop').hide() } } }) }); //以上是锚点JS //以下是返回顶部JS $(function() { $('body').append('<div id="gotop" onclick="goTop();"></div>'); }); function goTop(u, t, r) { var scrollActivate = !0; if(scrollActivate) { u = u || 0.1; t = t || 16; var s = 0, q = 0, o = 0, p = 0, n = 0, j = 0; document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); n = window.scrollX || 0; j = window.scrollY || 0; s = Math.max(s, Math.max(o, n)); q = Math.max(q, Math.max(p, j)); p = 1 + u; window.scrollTo(Math.floor(s / p), Math.floor(q / p)); 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r() } else { scrollActivate = !0 } } //以上是返回顶部JS </script> <div id="newsSideBar"> <div class="headImage"> <img src="https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1885933/o_201121071259touxiang.jpg" alt="头像"> </div> </div>
/*星光*/
.wall{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div#midground{
background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115413foreground.png");
z-index: -1;
-webkit-animation: cc 530s linear infinite;
-moz-animation: cc 530s linear infinite;
-o-animation: cc 530s linear infinite;
animation: cc 530s linear infinite;
}
/*div#foreground{
background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115413foreground.png");
z-index: -2;
-webkit-animation: cc 253s linear infinite;
-o-animation: cc 253s linear infinite;
-moz-animation: cc 253s linear infinite;
animation: cc 253s linear infinite;
}*/
div#top{
background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115313midground.png");
z-index: -4;
-webkit-animation: da 770s linear infinite;
-o-animation: da 770s linear infinite;
animation: da 770s linear infinite;
}
@-webkit-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 0 600%;
}
}
@-o-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 0 600%;
}
}
@-moz-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 0 600%;
}
}
@keyframes cc {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-webkit-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-moz-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-ms-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
/*标签云－－标签部分*/
#sidebar_toptags > div > ul > li > a {
font-size: 12px;
line-height: 10px;
color: #fff;
}
#sidebar_toptags > div > ul > li {
position: absolute;
padding: 0 10px;
border-radius: 7%;
background:#FF4500;
font-size: 14px;
line-height: 30px;
transition: all .7s;
font-size: 9px;
color:#FAFAD2;
box-shadow: 0 1.5px 3px -1px rgba(255,215,0,0.73)!important;
}
#sidebar_toptags > div > ul {
position: relative !important;
clear: both;
display: block;
padding: 10px;
padding-left: 0px;
width: 270px;
height: 230px;
/* background: #ffffee; */
}
/*侧边栏的展开与收回*/
#fry_append {
right: 9.37%;
width: 46px;
top: 6.3%;
opacity: 0.3377;
position: fixed;
z-index: 98;
background-color:#F5F5F5;
font-size: 12px;
margin: 7px 0 0;
padding: 3px;
border: 1px solid #FFD700;
border-radius: 5px;
float: right;
box-shadow: 0 1px 1.5px -1px rgba(255,215,0, 0.73)!important;
/* box-shadow: 0px 0px 15px 5px #FF3300 inset;
background: url(https://www.cnblogs.com/images/cnblogs_com/cainiao-chuanqi/1532380/t_%e5%9b%bd%e6%97%97.jpg) no-repeat;
*/
}
#fry_append div:first-of-type {
margin-top: 5px;
}
#fry_append div {
text-align: center;
cursor: pointer;
margin-top: 10px;
color:#000;
}
/*编辑 收藏*/
#topics .postDesc a {
background-color: #51C332;
border-radius: 3px;
text-align: center;
color: white;
text-shadow: 1px 1px 2px #8B0000;
padding: 7px 18px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
margin: 10px 3px;
/* box-shadow: black 0px 2px 8px;
margin-left: 10px;
width: 35px;
padding: 3px 8px!important;
background-color: #3cb034!important;
*/
box-shadow: 0 3px 5px -1px rgba(60,176,52,0.65)!important;
}
/*背景*/
body {
color:#000;
background: #708090;
background: url(https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/o_200609013616blue.jpg) fixed;
background-size:cover;
background-repeat: no-repeat;
font-family: Tahoma,"Microsoft YaHei",Helvetica,Verdana,sans-serif;
font-size: 14px;
min-height: 101%;
margin: 0;
padding: 0;
height:100%;
}
.postBody{
font-size: 14px;
}
.cnblogs_code pre{
font-size: 14px;
}
#home {
opacity: 0.93;
margin: 0px auto;
width: 77.33%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
/*文字触发效果*/
a:hover {
/*border-bottom: 1px solid;*/
color: #DC143C;
text-shadow: -0.73px 0 0 #FFD700, 0 0.73px 0 #FFD700, 0.73px 0 0 #FFD700, 0 -0.73px 0 #FFD700;
-webkit-transition: 0.3s;
}
/*博客导航栏 */
#navList {
float:left;
}
#navList li {
border: none;
font-size: 16px;
}
#navList a:hover{
color:#FF0000;
text-decoration: none;
}
/*目录样式*/
#sideCatalog a{
font-size:12px;
font-weight:normal !important;
}
#sideCatalog li {
background-color: #F0FFF0;
}
#sideCatalog a:hover{
color:#8B0000;
}
div#sideToolbar {
opacity: 0.93;
}
div#gotop {
opacity: 0.73;
}
/* 文章title自定义带动画样式 */
#topics .postTitle{
margin-top: 3px;
font-size: 17px;
}
.postTitle {
font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
clear: both;
background-color: #FBF9F9;
margin-bottom:8px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 7px;
border-left: 3px solid #21759b;
padding-left:3px;
font-size: 17px;
border-radius:0px;
}
.postTitle a:hover {
text-decoration: none;
margin-left: 17px;
color:#FF0000;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
transition: all 0.4s linear 0s;
}
/*
//加载进度条
#loadingProcess{
position: absolute;
position: fixed;
top:0;
left: 0;
height: 3px;
box-sizing: border-box;
width: 0%;
background-color: @AccentColor;
background-image: linear-gradient(to right,transparent 0%,transparent 80%,#fff 100% );
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
}
// 回复中代码片段会遮挡精灵球
.syntaxhighlighter{
z-index: -1
}
/*
* 动画声明
*/
/* 点赞样式Begin */
/*
@keyframes jumping {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-400px);
}
100% {
transform: translateY(0px);
}
}
#div_digg {
bottom: 0px;
bottom: 50px;
margin: 0px;
position: fixed;
opacity:0.66;
right: 0.5rem;
right: 16px;
animation: jumping 337s ease-in-out;
animation-iteration-count: infinite;
}
.buryit {
display: none;
}
.diggit {
background: url(https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1963449/o_210419030030o_ball2.png) no-repeat;
border-radius: 50%;
box-shadow: 0px 0px 15px 5px #FFFFCC inset;
cursor: pointer;
height: 100px;
margin: 0px;
padding: 0px;
width: 100px;
text-align: center;
}
#div_digg .diggnum {
color:#FFFF00;
opacity:0.73;
font-family: Verdana;
font-size: 37px;
line-height: 2em!important;
}
#digg_tips{
color: #fa5 !important;
width: 200px;
text-align: center;
margin-left: -50px;
margin-top: 20px;
}
a.digg_gray{
font-size: 18px;
}
#xiaociguai{
opacity:0.66;
position: fixed;
bottom: 0;
right: 0;
width: 155px;
cursor: pointer;
z-index:9999 ;
}
#xiaociguai:hover,#xiaociguai.enable-electric{
-webkit-filter: saturate(7);
filter: saturate(7);
}
*/
/* 点赞样式End */
/*侧边栏公告*/
#blog-news > img {
/*头像*/
display: block;
margin: auto;
border-radius: 50%;
}
#profile_block {
font-size: 15px;
padding: 20px;
line-height: 1.8;
}
#profile_block > a:link {
color: #F60;
}
/*公告结束*/
/* 个性签名 */
#MySignature {
box-shadow: 8px 1px 10px #989898;
padding: 10px;
text-shadow: 1px 1px 1px #FFF;
font-size: 15px;
border-left: solid 5px #55895B;
background: #FBF9F9;
border-radius: 10px 10px 37% 10px;
line-height: 2.4;
margin: 37px 0;
}
#MySignature a {
text-decoration: none;
color: #4183c4;
font-weight: bold;
}
#MySignature a:hover {
text-decoration: underline;
color: #f60;
}
#MySignature span {
color: #f60;
}
/*标题h2的自定义格式*/
#cnblogs_post_body h2 {
border: 1px solid #55895B;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
background-color: #FBF9F9;
background-position: left center;
padding: 3px 5px;
width: 100%;
display: inline-block;
box-sizing: border-box;
}
/*标题h3的自定义格式*/
#cnblogs_post_body h3 {
border: 1px solid #696969;
border-left-width: 3px;
border-radius: 7px;
border-right-width: 5px;
background-color: #F5F5F5;
background-position: left center;
padding: 2px 3px;
width: 37%;
display: inline-block;
box-sizing: border-box;
}
/* 关注收藏等几个按钮 */
#green_channel {
padding: 5px 0 15px 0;
margin-bottom: 10px;
margin-top: 10px;
border: 0;
border-top: #eee 1px dashed;
border-bottom: #eee 1px dashed;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: rgb(238, 238, 238);
font-size: 12px;
width: 100%!important;
text-align: center;
display: inline-block;
vertical-align: middle;
}
a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat {
text-decoration: none;
color: #fff;
margin: auto;
width: 80px;
display: inline-block;
line-height: 30px;
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
border-radius: 3px;
text-transform: uppercase;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
position: relative;
margin-left: 10px;
background-image: none;
margin-top: 10px;
}
a#green_channel_digg {
background-color: #2daebf;
box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65);
}
a#green_channel_favorite {
background-color: #ffb515;
box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65);
margin-left: 10px;
}
a#green_channel_follow {
background-color: #e33100!important;
box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65);
margin-left: 10px;
}
a#green_channel_wechat {
padding: 3px 8px!important;
background-color: #3cb034!important;
box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important;
margin-left: 10px;
width: 35px;
}
a#green_channel_weibo {
padding: 3px 8px!important;
background-color: #ff464b!important;
box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important;
margin-left: 10px;
width: 35px;
}
/*下面的头像边框*/
#author_profile_info img.author_avatar {
border-radius: 100%;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
border: 3px solid #f7f7f7;
padding: 0;
margin-left: 3px;
margin-right: 7px;
}
/* 禁用下划线 */
.postBody a:link, .postBody a:visited, .postBody a:active {
text-decoration: none;
}
/* 上一篇下一篇 */
#post_next_prev {
font-size: 14px;
color: #535353;
}
/*好看的滚动条*/
::-webkit-scrollbar{
width:10px!important;
height:10px!important;
-webkit-appearance:none;
}
::-webkit-scrollbar-thumb{
height:5px;border:1px solid transparent;
border-top:none;border-bottom:none;
-webkit-border-radius:6px;
background-color:rgba(0,0,0,.3);
background-clip:padding-box;
}
/*屏蔽广告 adblock */
/*
#ad_t2 {
display: none;
}
.c_ad_block {
display: none;
}
*/
/*新加 头像 img 侧边*/
#newsSideBar .headImage {
padding: auto;
}
#newsSideBar .headImage img {
border: 3px solid #C0C0C0;
border-radius: 50%;
width: 150px;
margin: auto;
display: block;
}
#sideBar a:hover{
color:#8B0000;
}
/*评论*/
/*评论列表 */
/*侧边栏和评论区更改*/
/*侧边栏和评论区更改*/
#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
font-size: 14px!important;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 3px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 7px 10px;
background-color: #f5f5f5;
}
div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
width: 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
background-image: url(https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1885930/o_201121070821lanqiu.gif);
background-repeat: no-repeat;
background-position: right bottom;
box-shadow: 0px 0px 12px #ddd inset;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}
#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}
/* 防止图片溢出 */
#cnblogs_post_body img {
max-width: 100%;
}
<!-- 页首代码 雪花--> <div id="midground" class="wall"></div> <div id="foreground" class="wall"></div> <div id="top" class="wall"></div> <!-- 页面HTML/JS部分 页面展开动画--> <div id="fry_append"> <div id="fry_sidebar">侧边栏</div> </div> <!-- 页面展开动画--> <script type="text/javascript"> function my_unfold(){ width_main=$('#main').width(); height_main=$('#main').height(); time=1000; function unfoldLeft(width,height,time) { $('#main').animate({ 'width': '0%', 'height': '0%', opacity: '0' }, 0,'linear'); $('#main').animate({ 'width': '+'+width_main, 'height': '+'+height_main, opacity: '1' }, time,'linear'); } unfoldLeft(width_main,height_main,time); } </script> <!--END 页面展开动画--> <!-- 展开侧边栏 --> <script type="text/javascript"> $('#main').append('<div id="fry_append"><hr/><div id="fry_sidebar"></div></div>'); $('#fry_sidebar').click(function(){ $('#mainContent .forFlow').css({'margin-right':'0px'}); if($('#sideBar').css('display')=='none'){ var width=$(window).width()*0.93; var width1=$(window).width()*0.97-280; var width2=($(window).width()-280)/2; if(width*0.35<230){ $('#mainContent').css({'display':'none'}); $('#sideBar').css({'display':'block','width':'280','margin-right':width2+'px'}); }else{ $('#sideBar').css({'display':'block','width':'230px','margin':'none','float':'right'}); $('#mainContent').css({'display':'block','width':width1+'px'}); } } else{ $('#sideBar').css({'display':'none'}); $('#mainContent').css({'display':'block','width':'122%'}); } }); </script> <!-- 此处放入页首Begin --> <!-- <div id="loadingbar"> <div id="loadingProcess"></div> </div> <script type="text/javascript"> var loadingProcess = 0; var isLoading = true; var $loadingProcess = $('#loadingProcess'); function loading() { loadingProcess += 1; if (loadingProcess >= 80) { loadingProcess = 80; } $loadingProcess.css('width', loadingProcess + '%'); if (!isLoading && loadingProcess === 80) { $loadingProcess.css('width', '100%').hide(200); } else { requestAnimationFrame(loading); } } loading(); $(function () { isLoading = false; }) </script> --> <!-- 此处放入页首End --> <!-- 此处放入页首Begin --> <!-- <div id="loadingProcess"></div> <script type="text/javascript"> var loadingProcess = 0; var isLoading = true; var $loadingProcess = $('#loadingProcess'); function loading() { loadingProcess += 1; if (loadingProcess >= 80) { loadingProcess = 80; } $loadingProcess.css('width', loadingProcess + '%'); if (!isLoading && loadingProcess === 80) { $loadingProcess.css('width', '100%').hide(200); } else { requestAnimationFrame(loading); } } loading(); $(function () { // 页面加载完毕，停掉加载动画 isLoading = false; // 载入小磁怪 if ($('#div_digg').length === 1 || window.location.href.indexOf('\/p\/')!==-1) { $(document.body).append('<img id="xiaociguai" title="电磁波切换" alt="电磁波切换" src="https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1532380/o_xiaociguai37.png" />') // 绑定停止精灵球跳动按钮 var isStopJump = false; $('#xiaociguai').click(function (e) { if (isStopJump) { $('#div_digg').css('animation', 'jumping 7s ease-in-out').css('animation-iteration-count', 'infinite'); $('#xiaociguai').removeClass('enable-electric') } else { $('#div_digg').css('animation', 'unset'); $('#xiaociguai').addClass('enable-electric') } isStopJump = !isStopJump; }) } }) </script> --> <!-- 此处放入页首End --> <!-- 设置目录（首页HTML代码） --> <link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/cainiao-chuanqi/maodian.css"> <!-- <script type="text/javascript"> /*自定义的鼠标点击效果*/ /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强","民主","文明","和谐","菜鸟-传奇","自由","平等","公正","法治","菜鸟-传奇","爱国","敬业","诚信","友善","菜鸟-传奇"); var $i = $("<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(119,136,153)" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> -->
<!-- 设置目录（首脚HTML代码） --> <script src="https://blog-static.cnblogs.com/files/cainiao-chuanqi/mulu.min.js"></script> <!-- lightbox的样式/ 图片点击放大效果 <link href="https://files.cnblogs.com/files/cainiao-chuanqi/img-css.css" rel="stylesheet"> --> <!-- lightbox.js核心代码 --> <!-- <script src="https://files.cnblogs.com/files/cainiao-chuanqi/img.js"></script> <script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script> <script type='text/javascript'>$(".code_img_closed").unwrap();</script> <script type='text/javascript'>$(".code_img_opened").unwrap();</script> -->
这里是我的博客自定义样式，留作以后参考。。。
虽然说博客园这么多年一直存在，但是，这么多年也一直没有变过。给我们留下的还是原来的回忆。
博客园带给我们的是长久的回忆。虽然没有变化，但是它留给我们了一笔宝贵的功能，那就是自定义博客园。这里有各式各样的改变方式，只要你脑洞够大，想法够多，都能整出一个属于自己的博客园。这里是自由者的天堂，没有那么多的边边框框，只有一群热爱自由、热爱分享的伙伴们。。。
我进入博客园都有一年多了，这里给了当初的小白一笔宝贵的财富。每当闲暇之余，我都会在这里汲取知识。充实自己，这里不需要有太多人知道，这里只要有一群技术人就足够了。分享着自己的总结经验，只为了有懂的人来认可。。。
博客园在这个纷繁的网络中就像家一样，舒适熟悉有安全感。让人乐此不疲的去分享，去结交新的知识，有趣的灵魂。。。
这里是我的博客园自定义样式，它就像家具一样，插入每一段，都会使自己的家焕然一新。下面是我从各个大佬手里借鉴过来的，也加入了我的一些更改和调式，让其更加贴切自己的想法。大家可以自己对比更改，让自己写博客更加的有趣。。。
附上博客园的div盒子模型，让大家能有个大体的概念。。。
页面制定css代码
下面是根据SimpleMemory模板调试的。。。
其他的模板也可以适用，就是一些小细节，大家需要自己调试。我把每个标签都做了注释。大家可以根据自己的喜好来改变自己的风格。。。
/*好看的滚动条*/
其实滚动条还可以改变颜色的，感觉灰色已经很好了 低调奢华有内涵。比之前的方块好看无数倍。。。
1 /*好看的滚动条*/ 2 ::-webkit-scrollbar{ 3 width:10px!important; 4 height:10px!important; 5 -webkit-appearance:none; 6 } 7 ::-webkit-scrollbar-thumb{ 8 height:5px;border:1px solid transparent; 9 border-top:none;border-bottom:none; 10 -webkit-border-radius:6px; 11 background-color:rgba(0,0,0,.3); 12 background-clip:padding-box; 13 }
/*博客导航栏 */
改变的之前字体的大小，后期考虑把自己的QQ和GitHub等联系的连接放上去，让导航栏更加的充实。。。
1 /*博客导航栏 */ 2 #navList { 3 float:right; 4 } 5 #navList li { 6 border: none; 7 font-size: 16px; 8 } 9 .blogStats { 10 display: none; 11 }
/*文章中 a 标签的触发效果*/
这是比较炫的一个小特效了。大家可以试着改变它的颜色和字体倾斜角度。
1 /*文字触发效果*/ 2 a:hover { 3 /*border-bottom: 1px solid;*/ 4 color: #fff; 5 text-shadow: -1px 0 0 #FFD700, 0 1px 0 #FFD700, 1px 0 0 #FFD700, 0 -1px 0 #FFD700; 6 -webkit-transition: 0.3s; 7 }
/* 文章title自定义带动画样式 */
点击触发，让标题动起来。
1 /* 文章title自定义带动画样式 */ 2 .postTitle { 3 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 4 clear: both; 5 background-color: #FBF9F9; 6 margin-bottom: 8px; 7 padding-top: 5px; 8 padding-bottom: 5px; 9 margin-top: 17px; 10 border-left: 3px solid #21759b; 11 padding-left: 17px; 12 font-size: 17px; 13 border-radius:0px; 14 } 15 .postTitle a:hover { 16 text-decoration: none; 17 margin-left: 17px; 18 color: #E00000; 19 } 20 .postTitle a:link, 21 .postTitle a:visited, 22 .postTitle a:active { 23 transition: all 0.4s linear 0s; 24 }
/*侧边栏的展开与收回*/
侧边栏的展开与收回,可以让阅读体验更好...其中的扩展有一点bug,就是在小屏的时候回超出一部分,是因为我没有把宽度调成100%,大家根据自己的样式调节...下面的首页部分是动态效果,大家请往下翻阅...
1 /*侧边栏的展开与收回*/ 2 #fry_append { 3 right: 9.3%; 4 width: 46px; 5 top: 6%; 6 opacity: 0.3377; 7 position: fixed; 8 z-index: 98; 9 background-color:#F5F5F5; 10 font-size: 12px; 11 margin: 10px 0 0; 12 padding: 5px; 13 border: 1px solid #F0FFF0; 14 border-radius: 5px; 15 float: right; 16 /* box-shadow: 0px 0px 15px 5px #FF3300 inset; 17 background: url(https://www.cnblogs.com/images/cnblogs_com/cainiao-chuanqi/1532380/t_%e5%9b%bd%e6%97%97.jpg) no-repeat; 18 */ 19 } 20 #fry_append div:first-of-type { 21 margin-top: 5px; 22 } 23 24 #fry_append div { 25 text-align: center; 26 cursor: pointer; 27 margin-top: 10px; 28 color:#000; 29 30 }
/*标签云－－标签部分*/
让标签飘起来,瞬间让一成不变的博客有了生机......我们还可以让自己的随笔分类飘起来,只要你想到的,他都能飘...只要更改#后面的部分就能实现自己想要的效果.后面还有一个HTMl的样式,请往下翻...
1 /*标签云－－标签部分*/ 2 #sidebar_toptags > div > ul > li > a { 3 font-size: 12px; 4 line-height: 11px; 5 color: #fff; 6 } 7 8 #sidebar_toptags > div > ul > li { 9 position: absolute; 10 padding: 0 10px; 11 border-radius: 10%; 12 background: red; 13 color: #fff; 14 font-size: 14px; 15 line-height: 30px; 16 transition: all .7s; 17 font-size: 9px; 18 color: #fff; 19 } 20 21 22 #sidebar_toptags > div > ul { 23 position: relative !important; 24 clear: both; 25 display: block; 26 padding: 10px; 27 padding-left: 0px; 28 width: 270px; 29 height: 230px; 30 /* background: #ffffee; */ 31 }
/* 个性签名 */
看完文章之后，给自己一些激励，也让大家认识一下自己，何乐而不为呢。。。
更改签名在这儿
1 /* 个性签名 */ 2 #MySignature { 3 box-shadow: 8px 1px 10px #989898; 4 padding: 10px; 5 text-shadow: 1px 1px 1px #FFF; 6 font-size: 15px; 7 border-left: solid 5px #55895B; 8 background: #FBF9F9; 9 border-radius: 10px 10px 37% 10px; 10 line-height: 2.4; 11 margin: 37px 0; 12 } 13 14 #MySignature a { 15 text-decoration: none; 16 color: #4183c4; 17 font-weight: bold; 18 } 19 20 #MySignature a:hover { 21 text-decoration: underline; 22 color: #f60; 23 } 24 25 #MySignature span { 26 color: #f60; 27 }
/*背景*/
摆脱了之前干巴巴的灰色或白色的背景。让阅读变得更加的有趣，但是也不能加一个太花哨的背景，那样也影响阅读。博客最主要的是保持它的可读性，让大家更关注于文章本身。
1 /*背景*/ 2 body { 3 color: #000; 4 background: url(https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/o_二次元1.12.jpg) fixed; 5 background-size:cover; 6 background-repeat: no-repeat; 7 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; 8 font-size: 12px; 9 min-height: 101%; 10 margin: 0; 11 padding: 0; 12 height:100%; 13 } 14 15 #home { 16 opacity: 0.97; 17 margin: 0px auto; 18 width: 73%; 19 min-width: 950px; 20 background-color: #fff; 21 padding: 30px; 22 margin-top: 50px; 23 margin-bottom: 50px; 24 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 25 }
/*背景星光动态图*/
1 /*星光动态图*/ 2 .wall{ 3 position: fixed; 4 top: 0; 5 left: 0; 6 bottom: 0; 7 right: 0; 8 } 9 div#midground{ 10 background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115313midground.png"); 11 z-index: -1; 12 -webkit-animation: cc 230s linear infinite;/*控制星光飘落速度*/ 13 -moz-animation: cc 230s linear infinite; 14 -o-animation: cc 230s linear infinite; 15 animation: cc 230s linear infinite; 16 } 17 /*div#foreground{ 18 background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115413foreground.png"); 19 z-index: -2; 20 -webkit-animation: cc 253s linear infinite; 21 -o-animation: cc 253s linear infinite; 22 -moz-animation: cc 253s linear infinite; 23 animation: cc 253s linear infinite; 24 }*/ 25 div#top{ 26 background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115413foreground.png"); 27 z-index: -4; 28 -webkit-animation: da 200s linear infinite; 29 -o-animation: da 200s linear infinite; 30 animation: da 200s linear infinite; 31 } 32 @-webkit-keyframes cc { 33 from{ 34 background-position: 0 0; 35 transform: translateY(10px); 36 } 37 to{ 38 background-position: 0 600%; 39 } 40 } 41 @-o-keyframes cc { 42 from{ 43 background-position: 0 0; 44 transform: translateY(10px); 45 } 46 to{ 47 background-position: 0 600%; 48 } 49 } 50 @-moz-keyframes cc { 51 from{ 52 background-position: 0 0; 53 transform: translateY(10px); 54 } 55 to{ 56 background-position: 0 600%; 57 } 58 } 59 @keyframes cc { 60 0%{ 61 background-position: 0 0; 62 } 63 100%{ 64 background-position: 0 600%; 65 } 66 } 67 68 @keyframes da { 69 0%{ 70 background-position: 0 0; 71 } 72 100%{ 73 background-position: 0 600%; 74 } 75 } 76 @-webkit-keyframes da { 77 0%{ 78 background-position: 0 0; 79 } 80 100%{ 81 background-position: 0 600%; 82 } 83 } 84 @-moz-keyframes da { 85 0%{ 86 background-position: 0 0; 87 } 88 100%{ 89 background-position: 0 600%; 90 } 91 } 92 @-ms-keyframes da { 93 0%{ 94 background-position: 0 0; 95 } 96 100%{ 97 background-position: 0 600%; 98 } 99 }
/*星光控制（ps：首页处）*/
1 <!-- 页首代码 星光--> 2 3 <div id="midground" class="wall"></div> 4 <div id="foreground" class="wall"></div> 5 <div id="top" class="wall"></div>
/*目录样式*/
就是傍边的目录导航栏了。。。
我的这个样式分三块，这里的CSS样式，还有下面两个JS样式。。。
1 /*目录样式*/ 2 #sideCatalog a{ 3 font-size:12px; 4 font-weight:normal !important; 5 } 6 7 #sideCatalog li { 8 background-color: #F0FFF0; 9 } 10 11 #sideCatalog { 12 opacity:0.73; 13 } 14 15 #sideCatalog a:hover{ 16 color:#8B0000; 17 }
/*h2和h3的自定义样式*/
主次分明。阅读要有节奏感。。。
1 /*标题h2的自定义格式*/ 2 #cnblogs_post_body h2 { 3 border: 1px solid #55895B; 4 border-left-width: 5px; 5 border-radius: 10px; 6 border-right-width: 5px; 7 background-color: #FBF9F9; 8 background-position: left center; 9 padding: 3px 5px; 10 width: 100%; 11 display: inline-block; 12 box-sizing: border-box; 13 } 14 15 /*标题h3的自定义格式*/ 16 #cnblogs_post_body h3 { 17 border: 1px solid #696969; 18 border-left-width: 3px; 19 border-radius: 7px; 20 border-right-width: 5px; 21 background-color: #F5F5F5; 22 background-position: left center; 23 padding: 2px 3px; 24 width: 37%; 25 display: inline-block; 26 box-sizing: border-box; 27 }
/*侧边栏公告*/
加一个自我画像，让大家认识你。。。
1 /*侧边栏公告*/ 2 /*新加 头像 img 侧边圆圈*/ 3 #newsSideBar .headImage { 4 padding: auto; 5 } 6 #newsSideBar .headImage img { 7 border: 3px solid #C0C0C0; 8 border-radius: 50%; 9 width: 150px; 10 margin: auto; 11 display: block; 12 } 13 14 /*头像*/ 15 #blog-news > img { 16 display: block; 17 margin: auto; 18 border-radius: 50%; 19 } 20 #profile_block { 21 font-size: 15px; 22 padding: 20px; 23 line-height: 1.8; 24 } 25 #profile_block > a:link { 26 color: #F60; 27 } 28 29 /*博客侧边标题样式*/ 30 .catListTitle { 31 margin-top: 21px; 32 margin-bottom: 10.5px; 33 text-align: left; 34 border-left: 3px solid rgba(82, 168, 236, 0.8); 35 padding: 10px 0 7px 10px; 36 background-color: #f5f5f5; 37 } 38 /*公告结束*/
/*最底部收藏样式*/
点赞按钮，这个比较中规中矩，emmm就是把反对键取消了，对 ，就是不接收批评。。。
然后原来的下一篇，字体太小了，可以 把他调大一点。大家如果想把那个地方改变成自己喜欢的样式，可以点击那个地方，右键，检查。就可以看到这个标签是什么，并且自己也可以在css样式中改变自己想要的属性。来消除自己的强迫症。。。
补充:之前的关注收藏几个按钮，不用比较，太难看了。。。
1 /* 关注收藏等几个按钮 */ 2 #green_channel { 3 padding: 5px 0 15px 0; 4 margin-bottom: 10px; 5 margin-top: 10px; 6 border: 0; 7 border-top: #eee 1px dashed; 8 border-bottom: #eee 1px dashed; 9 border-bottom-width: 1px; 10 border-bottom-style: dashed; 11 border-bottom-color: rgb(238, 238, 238); 12 font-size: 12px; 13 width: 100%!important; 14 text-align: center; 15 display: inline-block; 16 vertical-align: middle; 17 } 18 19 a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat { 20 text-decoration: none; 21 color: #fff; 22 margin: auto; 23 width: 80px; 24 display: inline-block; 25 line-height: 30px; 26 font-size: 15px; 27 font-weight: 500; 28 letter-spacing: 2px; 29 border-radius: 3px; 30 text-transform: uppercase; 31 transition: all .4s; 32 -webkit-transition: all .4s; 33 -moz-transition: all .4s; 34 -ms-transition: all .4s; 35 -o-transition: all .4s; 36 position: relative; 37 margin-left: 10px; 38 background-image: none; 39 margin-top: 10px; 40 } 41 a#green_channel_digg { 42 background-color: #2daebf; 43 box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65); 44 } 45 46 a#green_channel_favorite { 47 background-color: #ffb515; 48 box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65); 49 margin-left: 10px; 50 } 51 a#green_channel_follow { 52 background-color: #e33100!important; 53 box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65); 54 margin-left: 10px; 55 } 56 57 a#green_channel_wechat { 58 padding: 3px 8px!important; 59 background-color: #3cb034!important; 60 box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important; 61 margin-left: 10px; 62 width: 35px; 63 } 64 65 a#green_channel_weibo { 66 padding: 3px 8px!important; 67 background-color: #ff464b!important; 68 box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important; 69 margin-left: 10px; 70 width: 35px; 71 } 72 73 /*下面的头像边框*/ 74 #author_profile_info img.author_avatar { 75 border-radius: 100%; 76 box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4); 77 border: 3px solid #f7f7f7; 78 padding: 0; 79 margin-left: 3px; 80 margin-right: 7px; 81 } 82 83 /* 禁用下划线 */ 84 .postBody a:link, .postBody a:visited, .postBody a:active { 85 text-decoration: none; 86 } 87 88 /* 上一篇下一篇 */ 89 #post_next_prev { 90 font-size: 14px; 91 color: #535353; 92 }
26 /*顶一下*/ 27 .diggnum { 28 font-size:28px; 29 color:#6DA47D; 30 font-family:'Microsoft Yahei'; 31 } 32 #div_digg .diggnum { 33 line-height:37px; 34 } 35 .diggit { 36 float:left; 37 width:73px; 38 height:73px; 39 background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_dig.gif') no-repeat; 40 background-position:0 0; 41 text-align:center; 42 cursor:pointer; 43 } 44 .diggit:hover { 45 background-position:-73px 0; 46 } 47 48 /* 删除反对按钮,有点邪恶了 */ 49 .buryit{ 50 display: none; 51 } 52 /*屏蔽广告 adblock */ 53 #ad_t2 { 54 display: none; 55 } 56 .c_ad_block { 57 display: none; 58 }
/*编辑 收藏字体突出*/
让文章下面不再光秃秃的，编辑这个按钮还是比较长用到的，有的时候找半天找不到，还不如把他放大一点，做一点修饰，让自己在该文章的时候心情更加的舒畅。。。
1 /*编辑 收藏*/ 2 #topics .postDesc a { 3 background-color: #51C332; 4 border-radius: 3px; 5 text-align: center; 6 color: white; 7 text-shadow: 1px 1px 2px #8B0000; 8 padding: 3.7px 13px; 9 font-size: 14px; 10 font-weight: bold; 11 line-height: 1.5; 12 margin: 10px 3px; 13 box-shadow: black 0px 2px 8px; 14 }
/*防止图片溢出*/
1 /* 防止图片溢出 */ 2 #cnblogs_post_body img { 3 max-width: 100%; 4 } 5 6 //如果没有bug可以忽略这一条 7 /*溢出隐藏设置*/ 8 #topics, #mainContent { 9 overflow: visible; 10 } 11 #postDesc { 12 float: none; 13 }
/*评论区*/
之前的评论区 ，实在是不忍直视，我猜博客园评论这么少的原有，一定是它太丑了。。。
下面是我把别人的模板样式给截取下来的，有几处是冗余的，大家可以根据自己的喜好增加删除。。。
1 /*评论*/ 2 /*评论列表*/ 3 /*侧边栏和评论区更改*/ 5 .syntaxhighlighter a, 6 .syntaxhighlighter div, 7 .syntaxhighlighter code, 8 .syntaxhighlighter table, 9 .syntaxhighlighter table td, 10 .syntaxhighlighter table tr, 11 .syntaxhighlighter table tbody, 12 .syntaxhighlighter table thead, 13 .syntaxhighlighter table caption, 14 15 .syntaxhighlighter textarea { 16 font-size: 14px!important; 17 } 18 /*评论区*/ 19 /*评论框*/ 20 div.commentform p{ 21 margin-bottom:10px; 22 } 23 /*评论按钮*/ 24 .comment_btn { 25 padding: 5px 10px; 26 height: 35px; 27 width: 90px; 28 border: 0 none; 29 border-radius: 5px; 30 background: #ddd; 31 color: #999; 32 cursor:pointer; 33 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif; 34 text-shadow: 0 0 1px #fff; 35 display: inline !important; 36 } 37 .comment_btn:hover{ 38 padding: 5px 10px; 39 height: 35px; 40 width: 90px; 41 border: 0 none; 42 border-radius: 5px; 43 background: #258fb8; 44 color: white; 45 cursor:pointer; 46 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif; 47 text-shadow: 0 0 1px #fff; 48 display: inline !important; 49 } 50 #commentform_title { 51 background-image:none; 52 background-repeat:no-repeat; 53 margin-bottom:10px; 54 padding:0; 55 font-size:24px; 56 } 57 #commentbox_opt,#commentbox_opt + p { 58 text-align:center; 59 } 60 .commentbox_title { 61 width: 100%; 62 } 63 /*评论输入域*/ 64 #tbCommentBody { 65 font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif; 66 margin-top:10px; 67 max-width:100%; 68 min-width:100%; 69 background:white; 70 color:#333; 71 border:2px solid #fff; 72 box-shadow:inset 0 0 8px #aaa; 73 // padding:10px; 74 height:250px; 75 font-size:14px; 76 min-height:120px; 77 } 78 /*评论条目*/ 79 .feedbackItem { 80 font-size:14px; 81 line-height:24px; 82 margin:10px 0; 83 padding:20px; 84 background:#F2F2F2; 85 box-shadow:0 0 5px #aaa; 86 } 87 .feedbackListSubtitle { 88 font-weight:normal; 89 } 90 91 #blog-comments-placeholder, #comment_form { 92 padding: 20px; 93 background: #fff; 94 -webkit-box-shadow: 1px 2px 3px #ddd; 95 box-shadow: 1px 2px 3px #ddd; 96 margin-bottom: 50px; 97 } 98 /*评论标题*/ 99 .feedback_area_title { 100 margin-bottom: 15px; 101 font-size: 1.8em; 102 } 103 .feedbackItem { 104 border-bottom: 1px solid #CCC; 105 margin-bottom: 10px; 106 padding: 5px; 107 background: rgb(248, 248, 248); 108 } 109 .color_shine {background: rgb(226, 242, 255);} 110 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} 111 112 #comment_form .title { 113 font-weight: normal; 114 margin-bottom: 15px; 115 }
1 /*标签云－－标签部分*/ 2 #sidebar_toptags > div > ul > li > a { 3 font-size: 12px; 4 line-height: 11px; 5 color: #fff; 6 } 7 8 #sidebar_toptags > div > ul > li { 9 position: absolute; 10 padding: 0 10px; 11 border-radius: 10%; 12 background: red; 13 color: #fff; 14 font-size: 14px; 15 line-height: 30px; 16 transition: all .7s; 17 font-size: 9px; 18 color: #fff; 19 } 20 21 22 #sidebar_toptags > div > ul { 23 position: relative !important; 24 clear: both; 25 display: block; 26 padding: 10px; 27 padding-left: 0px; 28 width: 270px; 29 height: 230px; 30 /* background: #ffffee; */ 31 } 32 33 34 /*侧边栏的展开与收回*/ 35 #fry_append { 36 right: 9.3%; 37 width: 46px; 38 top: 6%; 39 opacity: 0.3377; 40 position: fixed; 41 z-index: 98; 42 background-color:#F5F5F5; 43 font-size: 12px; 44 margin: 10px 0 0; 45 padding: 5px; 46 border: 1px solid #F0FFF0; 47 border-radius: 5px; 48 float: right; 49 /* box-shadow: 0px 0px 15px 5px #FF3300 inset; 50 background: url(https://www.cnblogs.com/images/cnblogs_com/cainiao-chuanqi/1532380/t_%e5%9b%bd%e6%97%97.jpg) no-repeat; 51 */ 52 } 53 #fry_append div:first-of-type { 54 margin-top: 5px; 55 } 56 57 #fry_append div { 58 text-align: center; 59 cursor: pointer; 60 margin-top: 10px; 61 color:#000; 62 63 } 64 65 66 /*编辑 收藏*/ 67 #topics .postDesc a { 68 background-color: #51C332; 69 border-radius: 3px; 70 text-align: center; 71 color: white; 72 text-shadow: 1px 1px 2px #8B0000; 73 padding: 3.7px 13px; 74 font-size: 14px; 75 font-weight: bold; 76 line-height: 1.5; 77 margin: 10px 3px; 78 box-shadow: black 0px 2px 8px; 79 } 80 81 82 83 84 /*背景*/ 85 body { 86 color: #000; 87 background: url(https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/o_二次元1.12.jpg) fixed; 88 background-size:cover; 89 background-repeat: no-repeat; 90 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; 91 font-size: 12px; 92 min-height: 101%; 93 margin: 0; 94 padding: 0; 95 height:100%; 96 } 97 98 #home { 99 opacity: 0.93; 100 margin: 0px auto; 101 width: 77.33%; 102 min-width: 950px; 103 background-color: #fff; 104 padding: 30px; 105 margin-top: 50px; 106 margin-bottom: 50px; 107 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 108 } 109 110 111 112 113 /*文字触发效果*/ 114 a:hover { 115 /*border-bottom: 1px solid;*/ 116 color: #DC143C; 117 text-shadow: -0.73px 0 0 #FFD700, 0 0.73px 0 #FFD700, 0.73px 0 0 #FFD700, 0 -0.73px 0 #FFD700; 118 -webkit-transition: 0.3s; 119 } 120 121 /*博客导航栏 */ 122 #navList { 123 float:left; 124 } 125 126 #navList li { 127 border: none; 128 font-size: 16px; 129 } 130 131 #navList a:hover{ 132 color:#FF0000; 133 text-decoration: none; 134 } 135 136 137 /*目录样式*/ 138 #sideCatalog a{ 139 font-size:12px; 140 font-weight:normal !important; 141 } 142 143 #sideCatalog li { 144 background-color: #F0FFF0; 145 } 146 147 #sideCatalog a:hover{ 148 color:#8B0000; 149 } 150 151 div#sideToolbar { 152 opacity: 0.73; 153 } 154 155 div#gotop { 156 opacity: 0.73; 157 } 158 159 160 /* 文章title自定义带动画样式 */ 161 #topics .postTitle{ 162 margin-top: 3px; 163 font-size: 17px; 164 } 165 166 .postTitle { 167 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 168 clear: both; 169 background-color: #FBF9F9; 170 margin-bottom:8px; 171 padding-top: 5px; 172 padding-bottom: 5px; 173 margin-top: 7px; 174 border-left: 3px solid #21759b; 175 padding-left:3px; 176 font-size: 17px; 177 border-radius:0px; 178 } 179 .postTitle a:hover { 180 text-decoration: none; 181 margin-left: 17px; 182 color:#FF0000; 183 } 184 .postTitle a:link, 185 .postTitle a:visited, 186 .postTitle a:active { 187 transition: all 0.4s linear 0s; 188 } 189 190 191 //加载进度条 192 #loadingProcess{ 193 position: absolute; 194 position: fixed; 195 top:0; 196 left: 0; 197 height: 3px; 198 box-sizing: border-box; 199 width: 0%; 200 background-color: @AccentColor; 201 background-image: linear-gradient(to right,transparent 0%,transparent 80%,#fff 100% ); 202 border-bottom-right-radius: 1px; 203 border-top-right-radius: 1px; 204 } 205 // 回复中代码片段会遮挡精灵球 206 .syntaxhighlighter{ 207 z-index: -1 208 } 209 /* 210 * 动画声明 211 */ 212 /* 点赞样式Begin */ 213 @keyframes jumping { 214 0% { 215 transform: translateY(0px); 216 } 217 50% { 218 transform: translateY(-400px); 219 } 220 100% { 221 transform: translateY(0px); 222 } 223 } 224 #div_digg { 225 bottom: 0px; 226 bottom: 50px; 227 margin: 0px; 228 position: fixed; 229 opacity:0.37; 230 right: 0.5rem; 231 right: 16px; 232 animation: jumping 7s ease-in-out; 233 animation-iteration-count: infinite; 234 } 235 236 .buryit { 237 display: none; 238 } 239 240 .diggit { 241 background: url(http://images.cnblogs.com/cnblogs_com/vvjiang/996881/o_ball2.png) no-repeat; 242 border-radius: 50%; 243 box-shadow: 0px 0px 15px 5px #FFFFCC inset; 244 cursor: pointer; 245 height: 100px; 246 margin: 0px; 247 padding: 0px; 248 width: 100px; 249 text-align: center; 250 251 } 252 #div_digg .diggnum { 253 color:#FFFF00; 254 opacity:0.73; 255 font-family: Verdana; 256 font-size: 37px; 257 258 line-height: 2em!important; 259 } 260 #digg_tips{ 261 color: #fa5 !important; 262 width: 200px; 263 text-align: center; 264 margin-left: -50px; 265 margin-top: 20px; 266 } 267 268 a.digg_gray{ 269 font-size: 18px; 270 } 271 #xiaociguai{ 272 opacity:0.66; 273 position: fixed; 274 bottom: 0; 275 right: 0; 276 width: 155px; 277 cursor: pointer; 278 z-index:9999 ; 279 } 280 281 #xiaociguai:hover,#xiaociguai.enable-electric{ 282 -webkit-filter: saturate(7); 283 filter: saturate(7); 284 } 285 286 /* 点赞样式End */ 287 288 289 290 /*侧边栏公告*/ 291 #blog-news > img { 292 /*头像*/ 293 display: block; 294 margin: auto; 295 border-radius: 50%; 296 } 297 298 #profile_block { 299 font-size: 15px; 300 padding: 20px; 301 line-height: 1.8; 302 } 303 304 #profile_block > a:link { 305 color: #F60; 306 } 307 /*公告结束*/ 308 309 310 /* 个性签名 */ 311 #MySignature { 312 box-shadow: 8px 1px 10px #989898; 313 padding: 10px; 314 text-shadow: 1px 1px 1px #FFF; 315 font-size: 15px; 316 border-left: solid 5px #55895B; 317 background: #FBF9F9; 318 border-radius: 10px 10px 37% 10px; 319 line-height: 2.4; 320 margin: 37px 0; 321 } 322 323 #MySignature a { 324 text-decoration: none; 325 color: #4183c4; 326 font-weight: bold; 327 } 328 329 #MySignature a:hover { 330 text-decoration: underline; 331 color: #f60; 332 } 333 334 #MySignature span { 335 color: #f60; 336 } 337 338 /*标题h2的自定义格式*/ 339 #cnblogs_post_body h2 { 340 border: 1px solid #55895B; 341 border-left-width: 5px; 342 border-radius: 10px; 343 border-right-width: 5px; 344 background-color: #FBF9F9; 345 background-position: left center; 346 padding: 3px 5px; 347 width: 100%; 348 display: inline-block; 349 box-sizing: border-box; 350 } 351 352 /*标题h3的自定义格式*/ 353 #cnblogs_post_body h3 { 354 border: 1px solid #696969; 355 border-left-width: 3px; 356 border-radius: 7px; 357 border-right-width: 5px; 358 background-color: #F5F5F5; 359 background-position: left center; 360 padding: 2px 3px; 361 width: 37%; 362 display: inline-block; 363 box-sizing: border-box; 364 } 365 366 367 368 /* 关注收藏等几个按钮 */ 369 #green_channel { 370 padding: 10px; 371 margin: 20px 0; 372 font-size: 15px; 373 width: 400px; 374 } 375 376 #green_channel a { 377 border-radius: 3px; 378 text-shadow: none; 379 font-weight: normal; 380 box-shadow: none; 381 } 382 383 384 /* 禁用下划线 */ 385 .postBody a:link, .postBody a:visited, .postBody a:active { 386 text-decoration: none; 387 } 388 389 /* 上一篇下一篇 */ 390 #post_next_prev { 391 font-size: 14px; 392 color: #535353; 393 } 394 395 /*好看的滚动条*/ 396 ::-webkit-scrollbar{ 397 width:10px!important; 398 height:10px!important; 399 -webkit-appearance:none; 400 } 401 ::-webkit-scrollbar-thumb{ 402 height:5px;border:1px solid transparent; 403 border-top:none;border-bottom:none; 404 -webkit-border-radius:6px; 405 background-color:rgba(0,0,0,.3); 406 background-clip:padding-box; 407 } 408 409 410 /*屏蔽广告 adblock */ 411 #ad_t2 { 412 display: none; 413 } 414 .c_ad_block { 415 display: none; 416 } 417 418 /*新加 头像 img 侧边*/ 419 420 #newsSideBar .headImage { 421 padding: auto; 422 } 423 #newsSideBar .headImage img { 424 border: 3px solid #C0C0C0; 425 border-radius: 50%; 426 width: 150px; 427 margin: auto; 428 display: block; 429 } 430 431 #sideBar a:hover{ 432 color:#8B0000; 433 } 434 435 /*评论*/ 436 /*评论列表 */ 437 438 /*侧边栏和评论区更改*/ 439 /*侧边栏和评论区更改*/ 440 #google_ad_c1, #google_ad_c2 {display:none;} 441 .syntaxhighlighter a, 442 .syntaxhighlighter div, 443 .syntaxhighlighter code, 444 .syntaxhighlighter table, 445 .syntaxhighlighter table td, 446 .syntaxhighlighter table tr, 447 .syntaxhighlighter table tbody, 448 .syntaxhighlighter table thead, 449 .syntaxhighlighter table caption, 450 451 .syntaxhighlighter textarea { 452 font-size: 14px!important; 453 } 454 455 .catListTitle { 456 margin-top: 21px; 457 margin-bottom: 10.5px; 458 text-align: left; 459 border-left: 3px solid rgba(82, 168, 236, 0.8); 460 padding: 10px 0 7px 10px; 461 background-color: #f5f5f5; 462 } 463 464 465 div.commentform p{ 466 margin-bottom:10px; 467 } 468 .comment_btn { 469 padding: 5px 10px; 470 height: 35px; 471 width: 90px; 472 border: 0 none; 473 border-radius: 5px; 474 background: #ddd; 475 color: #999; 476 cursor:pointer; 477 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif; 478 text-shadow: 0 0 1px #fff; 479 display: inline !important; 480 } 481 .comment_btn:hover{ 482 padding: 5px 10px; 483 height: 35px; 484 width: 90px; 485 border: 0 none; 486 border-radius: 5px; 487 background: #258fb8; 488 color: white; 489 cursor:pointer; 490 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif; 491 text-shadow: 0 0 1px #fff; 492 display: inline !important; 493 } 494 #commentform_title { 495 background-image:none; 496 background-repeat:no-repeat; 497 margin-bottom:10px; 498 padding:0; 499 font-size:24px; 500 } 501 #commentbox_opt,#commentbox_opt + p { 502 text-align:center; 503 } 504 .commentbox_title { 505 width: 100%; 506 } 507 #tbCommentBody { 508 font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif; 509 margin-top:10px; 510 max-width:100%; 511 min-width:100%; 512 background:white; 513 color:#333; 514 border:2px solid #fff; 515 box-shadow:inset 0 0 8px #aaa; 516 // padding:10px; 517 height:250px; 518 font-size:14px; 519 min-height:120px; 520 } 521 522 .feedbackItem { 523 font-size:14px; 524 line-height:24px; 525 margin:10px 0; 526 padding:20px; 527 background:#F2F2F2; 528 box-shadow:0 0 5px #aaa; 529 } 530 .feedbackListSubtitle { 531 font-weight:normal; 532 } 533 534 #blog-comments-placeholder, #comment_form { 535 padding: 20px; 536 background: #fff; 537 -webkit-box-shadow: 1px 2px 3px #ddd; 538 box-shadow: 1px 2px 3px #ddd; 539 margin-bottom: 50px; 540 } 541 542 .feedback_area_title { 543 margin-bottom: 15px; 544 font-size: 1.8em; 545 } 546 .feedbackItem { 547 border-bottom: 1px solid #CCC; 548 margin-bottom: 10px; 549 padding: 5px; 550 background: rgb(248, 248, 248); 551 } 552 .color_shine {background: rgb(226, 242, 255);} 553 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} 554 555 #comment_form .title { 556 font-weight: normal; 557 margin-bottom: 15px; 558 } 559 560 /* 防止图片溢出 */ 561 #cnblogs_post_body img { 562 max-width: 100%; 563 }
博客侧边栏公告（支持HTML代码）（支持JS代码）
/*这里是插入头像图片的地址*/
1 <div id="newsSideBar"> 2 <div class="headImage"> 3 /*这里是插入头像图片的地址*/ 4 <img src="https://pic.cnblogs.com/avatar/1444343/20190803112901.png" alt="头像"> 5 </div> 6 </div>
/*标签云的动态效果*/
1 <script type="text/javascript"> 2 /*标签云的动态效果*/ 3 function gotoTop(){ 4 setTimeout(function(){ 5 6 document.documentElement.scrollTop = (document.documentElement.scrollTop*0.1); 7 document.body.scrollTop = (document.body.scrollTop - document.body.scrollTop*0.1); 8 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 9 10 if(scrollTop > 0){ 11 gotoTop(); 12 } 13 },10); 14 } 15 16 17 18 var Ftimer = setInterval (Ftoggle,1000), 19 contral = [false,false]; 20 21 function Ftoggle(){ 22 var tagObjbox = document.getElementsByClassName('catListTag')[0], 23 tagObj = tagObjbox.getElementsByTagName('li'), 24 navList = document.getElementById('navList'); 25 26 if(tagObjbox && tagObj){ 27 contral[1]=true; 28 SlideTag(tagObj); 29 } 30 if(navList){ 31 contral[2]=true; 32 AddLi(navList); 33 } 34 35 if(contral[1] & contral[2]){ 36 clearInterval(Ftimer); 37 } 38 } 39 40 function AddLi(e){ 41 var li = document.createElement('li'), 42 a = document.createElement('a'); 43 44 a.innerHTML = '⚪'; 45 a.className = 'menu'; 46 a.href = 'https://home.cnblogs.com/u/cainiao-chuanqi/'; 47 li.appendChild(a); 48 e.appendChild(li); 49 50 51 } 52 53 function SlideTag(tagObj){ 54 55 offset = true; 56 57 PreSeting(); 58 59 for(var i=0;i<tagObj.length;i++){ 60 (function(i){ 61 tagObj[i].onmouseover = function(){ 62 offset = false; 63 index = parseInt(this.style.zIndex); 64 this.style.zIndex = 9999; 65 } 66 tagObj[i].onmouseout = function(){ 67 offset = true; 68 this.style.zIndex = index; 69 } 70 })(i); 71 } 72 73 setInterval(PreSeting,5000) 74 75 function F_getSJS(x,y,z){ 76 77 var int = null; 78 79 if(!z) { z = 6} 80 81 while(int >= x || int <= y || int === null){ 82 int = Math.random(); 83 int = (int.toFixed(z) * x).toFixed(0); 84 } 85 return int; 86 } 87 88 function PreSeting(){ 89 if(offset){ 90 for(var i=0;i<tagObj.length;i++){ 91 tagObj[i].style.left = F_getSJS(100,30,10) + 'px'; 92 tagObj[i].style.top = F_getSJS(200,30,10) + 'px'; 93 tagObj[i].style.backgroundColor = 'rgb(' + F_getSJS(256,-1,5) + ',' + F_getSJS(256,-1,10) + ',' + F_getSJS(256,-1,15) + ')'; 94 tagObj[i].style.zIndex = F_getSJS(200,0,16); 95 } 96 } 97 98 } 99 100 101 } 102 103 onload = function(){ 104 105 if(location.href == 'https://www.cnblogs.com/cainiao-chuanqi/' || location.href == 'https://www.cnblogs.com/cainiao-chuanqi/'){setTimeout(goto,3000);} 106 107 function goto(){ 108 document.getElementById('headbox').style.display = 'block'; 109 document.documentElement.scrollTop = document.documentElement.scrollTop + 200; 110 document.body.scrollTop = document.body.scrollTop + 200; 111 } 112 } 113 114 </script>
/*设置目录*/
1 <script type="text/javascript"> 2 3 /*设置目录（侧边HTML代码）*/ 4 //以下是锚点JS 5 var a = $(document); 6 a.ready(function() { 7 var b = $('body'), 8 d = 'sideToolbar', 9 e = 'sideCatalog', 10 f = 'sideCatalog-catalog', 11 g = 'sideCatalogBtn', 12 h = 'sideToolbar-up', 13 i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>', 14 j = '', 15 k = 200, 16 l = 0, 17 m = 0, 18 n = 0, 19 //限制存在个数，如数量过多，则只显示h2，不显示h3 20 //o, p = 13, 21 o, p = 100, 22 q = true, 23 r = true, 24 s = b; 25 if(s.length === 0) { 26 return 27 }; 28 b.append(i); 29 //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 30 //o = s.find(':header'); 31 o = $('#cnblogs_post_body').find(':header') 32 if(o.length > p) { 33 r = false; 34 var t = s.find('h2'); 35 var u = s.find('h3'); 36 if(t.length + u.length > p) { 37 q = false 38 } 39 }; 40 o.each(function(t) { 41 var u = $(this), 42 v = u[0]; 43 44 var title = u.text(); 45 var text = u.text(); 46 47 u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 48 //if (!u.attr('id')) { 49 // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 50 //}; 51 if(v.localName === 'h2') { 52 l++; 53 m = 0; 54 if(text.length > 14) text = text.substr(0, 20) + "..."; 55 j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; 56 } else if(v.localName === 'h3') { 57 m++; 58 n = 0; 59 if(q) { 60 if(text.length > 12) text = text.substr(0, 16) + "..."; 61 j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; 62 } 63 } else if(v.localName === 'h4') { 64 n++; 65 if(r) { 66 j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; 67 } 68 } 69 }); 70 $('#' + f + '>ul').html(j); 71 b.data('spy', 'scroll'); 72 b.data('target', '.sideCatalogBg'); 73 $('body').scrollspy({ 74 target: '.sideCatalogBg' 75 }); 76 $sideCatelog = $('#' + e); 77 $('#' + g).on('click', function() { 78 if($(this).hasClass('sideCatalogBtnDisable')) { 79 $sideCatelog.css('visibility', 'hidden') 80 } else { 81 $sideCatelog.css('visibility', 'visible') 82 }; 83 $(this).toggleClass('sideCatalogBtnDisable') 84 }); 85 $('#' + h).on('click', function() { 86 $("html,body").animate({ 87 scrollTop: 0 88 }, 500) 89 }); 90 $sideToolbar = $('#' + d); 91 92 //通过判断评论框是否存在显示索引目录 93 var commentDiv = $("#blog-comments-placeholder"); 94 95 a.on('scroll', function() { 96 //评论框存在才调用方法 97 if(commentDiv.length > 0) { 98 var t = a.scrollTop(); 99 if(t > k) { 100 $sideToolbar.css('display', 'block'); 101 $('#gotop').show() 102 } else { 103 $sideToolbar.css('display', 'none') 104 $('#gotop').hide() 105 } 106 } 107 }) 108 }); 109 //以上是锚点JS 110 //以下是返回顶部JS 111 $(function() { 112 $('body').append('<div id="gotop" onclick="goTop();"></div>'); 113 }); 114 115 function goTop(u, t, r) { 116 var scrollActivate = !0; 117 if(scrollActivate) { 118 u = u || 0.1; 119 t = t || 16; 120 var s = 0, 121 q = 0, 122 o = 0, 123 p = 0, 124 n = 0, 125 j = 0; 126 document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); 127 document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); 128 n = window.scrollX || 0; 129 j = window.scrollY || 0; 130 s = Math.max(s, Math.max(o, n)); 131 q = Math.max(q, Math.max(p, j)); 132 p = 1 + u; 133 window.scrollTo(Math.floor(s / p), Math.floor(q / p)); 134 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r() 135 } else { 136 scrollActivate = !0 137 } 138 } 139 //以上是返回顶部JS 140 </script>
/*动态线条*/
color: 线条颜色，默认：‘0，0，0’；三个数字分别为(R,G,B),注意使用，分割 opacity: 线条透明度0~1,默认0.5 count: 线条总数量，默认150 zIndex: 背景的z-Index属性，css用于控制所在层的位置，默认-1
1 <div style = "display:none;">动态线条</div> 2 <script> 3 4 !function(){ 5 6 function n(n,e,t){ 7 8 return n.getAttribute(e)||t 9 10 } 11 12 function e(n){ 13 14 return document.getElementsByTagName(n) 15 16 } 17 18 function t(){ 19 20 var t=e("script"),o=t.length,i=t[o-1]; 21 22 return{ 23 24 l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.97),c:n(i,"color","220,20,60"),n:n(i,"count",37) 25 26 } 27 28 } 29 30 function o(){ 31 32 a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, 33 34 c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight 35 36 } 37 38 function i(){ 39 40 r.clearRect(0,0,a,c); 41 42 var n,e,t,o,m,l; 43 44 s.forEach(function(i,x){ 45 46 for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], 47 48 null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, 49 50 l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), 51 52 t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) 53 54 }), 55 56 x(i) 57 58 } 59 60 var a,c,u,m=document.createElement("canvas"), 61 62 d=t(),l="c_n"+d.l,r=m.getContext("2d"), 63 64 x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| 65 66 function(n){ 67 68 window.setTimeout(n,1e3/45) 69 70 }, 71 72 w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, 73 74 window.onmousemove=function(n){ 75 76 n=n||window.event,y.x=n.clientX,y.y=n.clientY 77 78 }, 79 80 window.onmouseout=function(){ 81 82 y.x=null,y.y=null 83 84 }; 85 86 for(var s=[],f=0;d.n>f;f++){ 87 88 var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) 89 90 } 91 92 u=s.concat([y]), 93 94 setTimeout(function(){i()},100) 95 96 }(); 97 98 </script> 99 <div style = "display:none;"> 动态线条end</div>
<script type="text/javascript"> /*标签云的动态效果*/ function gotoTop(){ setTimeout(function(){ document.documentElement.scrollTop = (document.documentElement.scrollTop*0.1); document.body.scrollTop = (document.body.scrollTop - document.body.scrollTop*0.1); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop > 0){ gotoTop(); } },10); } var Ftimer = setInterval (Ftoggle,1000), contral = [false,false]; function Ftoggle(){ var tagObjbox = document.getElementsByClassName('catListTag')[0], tagObj = tagObjbox.getElementsByTagName('li'), navList = document.getElementById('navList'); if(tagObjbox && tagObj){ contral[1]=true; SlideTag(tagObj); } if(navList){ contral[2]=true; AddLi(navList); } if(contral[1] & contral[2]){ clearInterval(Ftimer); } } function AddLi(e){ var li = document.createElement('li'), a = document.createElement('a'); a.innerHTML = '⚪'; a.className = 'menu'; a.href = 'https://home.cnblogs.com/u/cainiao-chuanqi/'; li.appendChild(a); e.appendChild(li); } function SlideTag(tagObj){ offset = true; PreSeting(); for(var i=0;i<tagObj.length;i++){ (function(i){ tagObj[i].onmouseover = function(){ offset = false; index = parseInt(this.style.zIndex); this.style.zIndex = 9999; } tagObj[i].onmouseout = function(){ offset = true; this.style.zIndex = index; } })(i); } setInterval(PreSeting,5000) function F_getSJS(x,y,z){ var int = null; if(!z) { z = 6} while(int >= x || int <= y || int === null){ int = Math.random(); int = (int.toFixed(z) * x).toFixed(0); } return int; } function PreSeting(){ if(offset){ for(var i=0;i<tagObj.length;i++){ tagObj[i].style.left = F_getSJS(100,30,10) + 'px'; tagObj[i].style.top = F_getSJS(200,30,10) + 'px'; tagObj[i].style.backgroundColor = 'rgb(' + F_getSJS(256,-1,5) + ',' + F_getSJS(256,-1,10) + ',' + F_getSJS(256,-1,15) + ')'; tagObj[i].style.zIndex = F_getSJS(200,0,16); } } } } onload = function(){ if(location.href == 'https://www.cnblogs.com/cainiao-chuanqi/' || location.href == 'https://www.cnblogs.com/cainiao-chuanqi/'){setTimeout(goto,3000);} function goto(){ document.getElementById('headbox').style.display = 'block'; document.documentElement.scrollTop = document.documentElement.scrollTop + 200; document.body.scrollTop = document.body.scrollTop + 200; } } </script> <script type="text/javascript"> /*设置目录（侧边HTML代码）*/ //以下是锚点JS var a = $(document); a.ready(function() { var b = $('body'), d = 'sideToolbar', e = 'sideCatalog', f = 'sideCatalog-catalog', g = 'sideCatalogBtn', h = 'sideToolbar-up', i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>', j = '', k = 200, l = 0, m = 0, n = 0, //限制存在个数，如数量过多，则只显示h2，不显示h3 //o, p = 13, o, p = 100, q = true, r = true, s = b; if(s.length === 0) { return }; b.append(i); //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 //o = s.find(':header'); o = $('#cnblogs_post_body').find(':header') if(o.length > p) { r = false; var t = s.find('h2'); var u = s.find('h3'); if(t.length + u.length > p) { q = false } }; o.each(function(t) { var u = $(this), v = u[0]; var title = u.text(); var text = u.text(); u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //if (!u.attr('id')) { // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //}; if(v.localName === 'h2') { l++; m = 0; if(text.length > 14) text = text.substr(0, 20) + "..."; j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; } else if(v.localName === 'h3') { m++; n = 0; if(q) { if(text.length > 12) text = text.substr(0, 16) + "..."; j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; } } else if(v.localName === 'h4') { n++; if(r) { j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; } } }); $('#' + f + '>ul').html(j); b.data('spy', 'scroll'); b.data('target', '.sideCatalogBg'); $('body').scrollspy({ target: '.sideCatalogBg' }); $sideCatelog = $('#' + e); $('#' + g).on('click', function() { if($(this).hasClass('sideCatalogBtnDisable')) { $sideCatelog.css('visibility', 'hidden') } else { $sideCatelog.css('visibility', 'visible') }; $(this).toggleClass('sideCatalogBtnDisable') }); $('#' + h).on('click', function() { $("html,body").animate({ scrollTop: 0 }, 500) }); $sideToolbar = $('#' + d); //通过判断评论框是否存在显示索引目录 var commentDiv = $("#blog-comments-placeholder"); a.on('scroll', function() { //评论框存在才调用方法 if(commentDiv.length > 0) { var t = a.scrollTop(); if(t > k) { $sideToolbar.css('display', 'block'); $('#gotop').show() } else { $sideToolbar.css('display', 'none') $('#gotop').hide() } } }) }); //以上是锚点JS //以下是返回顶部JS $(function() { $('body').append('<div id="gotop" onclick="goTop();"></div>'); }); function goTop(u, t, r) { var scrollActivate = !0; if(scrollActivate) { u = u || 0.1; t = t || 16; var s = 0, q = 0, o = 0, p = 0, n = 0, j = 0; document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); n = window.scrollX || 0; j = window.scrollY || 0; s = Math.max(s, Math.max(o, n)); q = Math.max(q, Math.max(p, j)); p = 1 + u; window.scrollTo(Math.floor(s / p), Math.floor(q / p)); 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r() } else { scrollActivate = !0 } } //以上是返回顶部JS </script> <div id="newsSideBar"> <div class="headImage"> <img src="https://pic.cnblogs.com/avatar/1444343/20190803112901.png" alt="头像"> </div> </div> <div style = "display:none;">动态线条</div> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.97),c:n(i,"color","220,20,60"),n:n(i,"count",37) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script> <div style = "display:none;"> 动态线条end</div>
页首Html代码
/*设置目录*/
承接上面的HTML代码还有上面侧边栏代码,要一起复制到后台管理里面才能生效...
1 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"/*设置目录（首页HTML代码）*/>
/* 页面HTML/JS部分 页面展开动画*/
承接上面的css样式...CSS写的有点冗余,大家可以根据自己的需求写...可与把他改成一个小动物啥的,随意发挥...
1 <!-- 页面HTML/JS部分 页面展开动画--> 2 <div id="fry_append"> 3 4 <div id="fry_sidebar">侧边栏</div> 5 6 </div> 7 <!-- 页面展开动画--> 8 <script type="text/javascript"> 9 function my_unfold(){ 10 width_main=$('#main').width(); 11 height_main=$('#main').height(); 12 time=1000; 13 function unfoldLeft(width,height,time) { 14 $('#main').animate({ 15 'width': '0%', 16 'height': '0%', 17 opacity: '0' 18 }, 0,'linear'); 19 $('#main').animate({ 20 'width': '+'+width_main, 21 'height': '+'+height_main, 22 opacity: '1' 23 }, time,'linear'); 24 } 25 unfoldLeft(width_main,height_main,time); 26 } 27 </script> 28 29 <!--END 页面展开动画--> 30 <!-- 展开侧边栏 --> 31 <script type="text/javascript"> 32 $('#main').append('<div id="fry_append"><hr/><div id="fry_sidebar">侧边栏</div></div>'); 33 $('#fry_sidebar').click(function(){ 34 $('#mainContent .forFlow').css({'margin-right':'0px'}); 35 if($('#sideBar').css('display')=='none'){ 36 var width=$(window).width()*0.93; 37 var width1=$(window).width()*0.97-300; 38 var width2=($(window).width()-280)/2; 39 if(width*0.35<230){ 40 $('#mainContent').css({'display':'none'}); 41 $('#sideBar').css({'display':'block','width':'280','margin-right':width2+'px'}); 42 }else{ 43 $('#sideBar').css({'display':'block','width':'277px','margin':'none','float':'right'}); 44 $('#mainContent').css({'display':'block','width':width1+'px'}); 45 } 46 } 47 else{ 48 $('#sideBar').css({'display':'none'}); 49 $('#mainContent').css({'display':'block','width':'123%'}); 50 } 51 }); 52 53 </script>
/*鼠标点击-烟花效果*/
有一个更简单的方法，就是js托管到另一个地方，减少代码量。（下面两种方法都可以实现点击烟花效果，任选其中 一个就可以了）
1 <script src="https://files.cnblogs.com/files/cainiao-chuanqi/mouse-click.js"></script> 2 <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
1 <script type="text/javascript"> 2 /*烟花特效*/ 3 class Circle { 4 constructor({ origin, speed, color, angle, context }) { 5 this.origin = origin 6 this.position = { ...this.origin } 7 this.color = color 8 this.speed = speed 9 this.angle = angle 10 this.context = context 11 this.renderCount = 0 12 } 13 14 draw() { 15 this.context.fillStyle = this.color 16 this.context.beginPath() 17 this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2) 18 this.context.fill() 19 } 20 21 move() { 22 this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x 23 this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3) 24 this.renderCount++ 25 } 26 } 27 28 class Boom { 29 constructor ({ origin, context, circleCount = 10, area }) { 30 this.origin = origin 31 this.context = context 32 this.circleCount = circleCount 33 this.area = area 34 this.stop = false 35 this.circles = [] 36 } 37 38 randomArray(range) { 39 const length = range.length 40 const randomIndex = Math.floor(length * Math.random()) 41 return range[randomIndex] 42 } 43 44 randomColor() { 45 const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F'] 46 return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) 47 } 48 49 randomRange(start, end) { 50 return (end - start) * Math.random() + start 51 } 52 53 init() { 54 for(let i = 0; i < this.circleCount; i++) { 55 const circle = new Circle({ 56 context: this.context, 57 origin: this.origin, 58 color: this.randomColor(), 59 angle: this.randomRange(Math.PI - 1, Math.PI + 1), 60 speed: this.randomRange(1, 6) 61 }) 62 this.circles.push(circle) 63 } 64 } 65 66 move() { 67 this.circles.forEach((circle, index) => { 68 if (circle.position.x > this.area.width || circle.position.y > this.area.height) { 69 return this.circles.splice(index, 1) 70 } 71 circle.move() 72 }) 73 if (this.circles.length == 0) { 74 this.stop = true 75 } 76 } 77 78 draw() { 79 this.circles.forEach(circle => circle.draw()) 80 } 81 } 82 83 class CursorSpecialEffects { 84 constructor() { 85 this.computerCanvas = document.createElement('canvas') 86 this.renderCanvas = document.createElement('canvas') 87 88 this.computerContext = this.computerCanvas.getContext('2d') 89 this.renderContext = this.renderCanvas.getContext('2d') 90 91 this.globalWidth = window.innerWidth 92 this.globalHeight = window.innerHeight 93 94 this.booms = [] 95 this.running = false 96 } 97 98 handleMouseDown(e) { 99 const boom = new Boom({ 100 origin: { x: e.clientX, y: e.clientY }, 101 context: this.computerContext, 102 area: { 103 width: this.globalWidth, 104 height: this.globalHeight 105 } 106 }) 107 boom.init() 108 this.booms.push(boom) 109 this.running || this.run() 110 } 111 112 handlePageHide() { 113 this.booms = [] 114 this.running = false 115 } 116 117 init() { 118 const style = this.renderCanvas.style 119 style.position = 'fixed' 120 style.top = style.left = 0 121 style.zIndex = '999999999999999999999999999999999999999999' 122 style.pointerEvents = 'none' 123 124 style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth 125 style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight 126 127 document.body.append(this.renderCanvas) 128 129 window.addEventListener('mousedown', this.handleMouseDown.bind(this)) 130 window.addEventListener('pagehide', this.handlePageHide.bind(this)) 131 } 132 133 run() { 134 this.running = true 135 if (this.booms.length == 0) { 136 return this.running = false 137 } 138 139 requestAnimationFrame(this.run.bind(this)) 140 141 this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight) 142 this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight) 143 144 this.booms.forEach((boom, index) => { 145 if (boom.stop) { 146 return this.booms.splice(index, 1) 147 } 148 boom.move() 149 boom.draw() 150 }) 151 this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight) 152 } 153 } 154 155 const cursorSpecialEffects = new CursorSpecialEffects() 156 cursorSpecialEffects.init() 157 158 </script>
/*设置小心心*/
鼠标点击的爱心特效。。。
1 <script type="text/javascript"> 2 /*设置小心心*/ 3 (function(window, document, undefined) { 4 var hearts = []; 5 window.requestAnimationFrame = (function() { 6 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 7 function(callback) { 8 setTimeout(callback, 1000 / 60); 9 } 10 })(); 11 init(); 12 function init() { 13 css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); 14 attachEvent(); 15 gameloop(); 16 } 17 function gameloop() { 18 for (var i = 0; i < hearts.length; i++) { 19 if (hearts[i].alpha <= 0) { 20 document.body.removeChild(hearts[i].el); 21 hearts.splice(i, 1); 22 continue; 23 } 24 hearts[i].y--; 25 hearts[i].scale += 0.004; 26 hearts[i].alpha -= 0.013; 27 hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color; 28 } 29 requestAnimationFrame(gameloop); 30 } 31 function attachEvent() { 32 var old = typeof window.onclick === "function" && window.onclick; 33 window.onclick = function(event) { 34 old && old(); 35 createHeart(event); 36 } 37 } 38 function createHeart(event) { 39 var d = document.createElement("div"); 40 d.className = "heart"; 41 hearts.push({ 42 el: d, 43 x: event.clientX - 5, 44 y: event.clientY - 5, 45 scale: 1, 46 alpha: 1, 47 color: randomColor() 48 }); 49 document.body.appendChild(d); 50 } 51 function css(css) { 52 var style = document.createElement("style"); 53 style.type = "text/css"; 54 try { 55 style.appendChild(document.createTextNode(css)); 56 } catch(ex) { 57 style.styleSheet.cssText = css; 58 } 59 document.getElementsByTagName('head')[0].appendChild(style); 60 } 61 function randomColor() { 62 return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")"; 63 } 64 })(window, document); 65 </script>
/*自定义的鼠标点击效果*/
1 <script type="text/javascript"> 2 /*自定义的鼠标点击效果*/ 3 /* 鼠标特效 */ 4 var a_idx = 0; 5 jQuery(document).ready(function($) { 6 $("body").click(function(e) { 7 var a = new Array("富强","民主","文明","和谐","菜鸟-传奇","自由","平等","公正","法治","菜鸟-传奇","爱国","敬业","诚信","友善","菜鸟-传奇"); 8 var $i = $("<span/>").text(a[a_idx]); 9 a_idx = (a_idx + 1) % a.length; 10 var x = e.pageX, 11 y = e.pageY; 12 $i.css({ 13 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 14 "top": y - 20, 15 "left": x, 16 "position": "absolute", 17 "font-weight": "bold", 18 "color": "rgb(119,136,153)" 19 }); 20 $("body").append($i); 21 $i.animate({ 22 "top": y - 180, 23 "opacity": 0 24 }, 25 1500, 26 function() { 27 $i.remove(); 28 }); 29 }); 30 }); 31 </script>
1 <!-- 页面HTML/JS部分 页面展开动画--> 2 <div id="fry_append"> 3 4 <div id="fry_sidebar">侧边栏</div> 5 6 </div> 7 <!-- 页面展开动画--> 8 <script type="text/javascript"> 9 function my_unfold(){ 10 width_main=$('#main').width(); 11 height_main=$('#main').height(); 12 time=1000; 13 function unfoldLeft(width,height,time) { 14 $('#main').animate({ 15 'width': '0%', 16 'height': '0%', 17 opacity: '0' 18 }, 0,'linear'); 19 $('#main').animate({ 20 'width': '+'+width_main, 21 'height': '+'+height_main, 22 opacity: '1' 23 }, time,'linear'); 24 } 25 unfoldLeft(width_main,height_main,time); 26 } 27 </script> 28 29 <!--END 页面展开动画--> 30 <!-- 展开侧边栏 --> 31 <script type="text/javascript"> 32 $('#main').append('<div id="fry_append"><hr/><div id="fry_sidebar">侧边栏</div></div>'); 33 $('#fry_sidebar').click(function(){ 34 $('#mainContent .forFlow').css({'margin-right':'0px'}); 35 if($('#sideBar').css('display')=='none'){ 36 var width=$(window).width()*0.93; 37 var width1=$(window).width()*0.97-300; 38 var width2=($(window).width()-280)/2; 39 if(width*0.35<230){ 40 $('#mainContent').css({'display':'none'}); 41 $('#sideBar').css({'display':'block','width':'280','margin-right':width2+'px'}); 42 }else{ 43 $('#sideBar').css({'display':'block','width':'277px','margin':'none','float':'right'}); 44 $('#mainContent').css({'display':'block','width':width1+'px'}); 45 } 46 } 47 else{ 48 $('#sideBar').css({'display':'none'}); 49 $('#mainContent').css({'display':'block','width':'123%'}); 50 } 51 }); 52 53 </script> 54 55 56 57 58 59 60 61 <script type="text/javascript"> 62 /*烟花特效*/ 63 class Circle { 64 constructor({ origin, speed, color, angle, context }) { 65 this.origin = origin 66 this.position = { ...this.origin } 67 this.color = color 68 this.speed = speed 69 this.angle = angle 70 this.context = context 71 this.renderCount = 0 72 } 73 74 draw() { 75 this.context.fillStyle = this.color 76 this.context.beginPath() 77 this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2) 78 this.context.fill() 79 } 80 81 move() { 82 this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x 83 this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3) 84 this.renderCount++ 85 } 86 } 87 88 class Boom { 89 constructor ({ origin, context, circleCount = 10, area }) { 90 this.origin = origin 91 this.context = context 92 this.circleCount = circleCount 93 this.area = area 94 this.stop = false 95 this.circles = [] 96 } 97 98 randomArray(range) { 99 const length = range.length 100 const randomIndex = Math.floor(length * Math.random()) 101 return range[randomIndex] 102 } 103 104 randomColor() { 105 const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F'] 106 return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) 107 } 108 109 randomRange(start, end) { 110 return (end - start) * Math.random() + start 111 } 112 113 init() { 114 for(let i = 0; i < this.circleCount; i++) { 115 const circle = new Circle({ 116 context: this.context, 117 origin: this.origin, 118 color: this.randomColor(), 119 angle: this.randomRange(Math.PI - 1, Math.PI + 1), 120 speed: this.randomRange(1, 6) 121 }) 122 this.circles.push(circle) 123 } 124 } 125 126 move() { 127 this.circles.forEach((circle, index) => { 128 if (circle.position.x > this.area.width || circle.position.y > this.area.height) { 129 return this.circles.splice(index, 1) 130 } 131 circle.move() 132 }) 133 if (this.circles.length == 0) { 134 this.stop = true 135 } 136 } 137 138 draw() { 139 this.circles.forEach(circle => circle.draw()) 140 } 141 } 142 143 class CursorSpecialEffects { 144 constructor() { 145 this.computerCanvas = document.createElement('canvas') 146 this.renderCanvas = document.createElement('canvas') 147 148 this.computerContext = this.computerCanvas.getContext('2d') 149 this.renderContext = this.renderCanvas.getContext('2d') 150 151 this.globalWidth = window.innerWidth 152 this.globalHeight = window.innerHeight 153 154 this.booms = [] 155 this.running = false 156 } 157 158 handleMouseDown(e) { 159 const boom = new Boom({ 160 origin: { x: e.clientX, y: e.clientY }, 161 context: this.computerContext, 162 area: { 163 width: this.globalWidth, 164 height: this.globalHeight 165 } 166 }) 167 boom.init() 168 this.booms.push(boom) 169 this.running || this.run() 170 } 171 172 handlePageHide() { 173 this.booms = [] 174 this.running = false 175 } 176 177 init() { 178 const style = this.renderCanvas.style 179 style.position = 'fixed' 180 style.top = style.left = 0 181 style.zIndex = '999999999999999999999999999999999999999999' 182 style.pointerEvents = 'none' 183 184 style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth 185 style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight 186 187 document.body.append(this.renderCanvas) 188 189 window.addEventListener('mousedown', this.handleMouseDown.bind(this)) 190 window.addEventListener('pagehide', this.handlePageHide.bind(this)) 191 } 192 193 run() { 194 this.running = true 195 if (this.booms.length == 0) { 196 return this.running = false 197 } 198 199 requestAnimationFrame(this.run.bind(this)) 200 201 this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight) 202 this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight) 203 204 this.booms.forEach((boom, index) => { 205 if (boom.stop) { 206 return this.booms.splice(index, 1) 207 } 208 boom.move() 209 boom.draw() 210 }) 211 this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight) 212 } 213 } 214 215 const cursorSpecialEffects = new CursorSpecialEffects() 216 cursorSpecialEffects.init() 217 218 </script> 219 220 221 222 223 224 225 226 <!-- 此处放入页首Begin --> 227 <div id="loadingbar"> 228 <div id="loadingProcess"></div> 229 </div> 230 <script type="text/javascript"> 231 var loadingProcess = 0; 232 var isLoading = true; 233 var $loadingProcess = $('#loadingProcess'); 234 function loading() { 235 loadingProcess += 1; 236 if (loadingProcess >= 80) { 237 loadingProcess = 80; 238 } 239 $loadingProcess.css('width', loadingProcess + '%'); 240 if (!isLoading && loadingProcess === 80) { 241 $loadingProcess.css('width', '100%').hide(200); 242 } else { 243 requestAnimationFrame(loading); 244 } 245 } 246 loading(); 247 $(function () { 248 isLoading = false; 249 }) 250 </script> 251 <!-- 此处放入页首End --> 252 <!-- 此处放入页首Begin --> 253 <div id="loadingProcess"></div> 254 <script type="text/javascript"> 255 var loadingProcess = 0; 256 var isLoading = true; 257 var $loadingProcess = $('#loadingProcess'); 258 function loading() { 259 loadingProcess += 1; 260 if (loadingProcess >= 80) { 261 loadingProcess = 80; 262 } 263 $loadingProcess.css('width', loadingProcess + '%'); 264 if (!isLoading && loadingProcess === 80) { 265 $loadingProcess.css('width', '100%').hide(200); 266 } else { 267 requestAnimationFrame(loading); 268 } 269 } 270 loading(); 271 $(function () { 272 // 页面加载完毕，停掉加载动画 273 isLoading = false; 274 // 载入小磁怪 275 if ($('#div_digg').length === 1 || window.location.href.indexOf('\/p\/')!==-1) { 276 $(document.body).append('<img id="xiaociguai" title="电磁波切换" alt="电磁波切换" src="http://images.cnblogs.com/cnblogs_com/vvjiang/996881/o_xiaociguai1.jpg" />') 277 // 绑定停止精灵球跳动按钮 278 var isStopJump = false; 279 $('#xiaociguai').click(function (e) { 280 if (isStopJump) { 281 $('#div_digg').css('animation', 'jumping 7s ease-in-out').css('animation-iteration-count', 'infinite'); 282 $('#xiaociguai').removeClass('enable-electric') 283 } else { 284 $('#div_digg').css('animation', 'unset'); 285 $('#xiaociguai').addClass('enable-electric') 286 } 287 isStopJump = !isStopJump; 288 }) 289 } 290 }) 291 </script> 292 <!-- 此处放入页首End --> 293 294 295 296 297 298 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"/*设置目录（首页HTML代码）*/> 299 300 301 302 303 304 305 306 <script type="text/javascript"> 307 /*自定义的鼠标点击效果*/ 308 /* 鼠标特效 */ 309 var a_idx = 0; 310 jQuery(document).ready(function($) { 311 $("body").click(function(e) { 312 var a = new Array("富强","民主","文明","和谐","菜鸟-传奇","自由","平等","公正","法治","菜鸟-传奇","爱国","敬业","诚信","友善","菜鸟-传奇"); 313 var $i = $("<span/>").text(a[a_idx]); 314 a_idx = (a_idx + 1) % a.length; 315 var x = e.pageX, 316 y = e.pageY; 317 $i.css({ 318 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 319 "top": y - 20, 320 "left": x , 321 "position": "absolute", 322 "font-weight": "bold", 323 "color": "rgb(119,136,153)" 324 }); 325 $("body").append($i); 326 $i.animate({ 327 "top": y - 180, 328 "opacity": 0 329 }, 330 1500, 331 function() { 332 $i.remove(); 333 }); 334 }); 335 }); 336 </script>
页脚Html代码
/*设置目录*/
1 <script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"/*设置目录（首脚HTML代码）*/></script>
/*图片点击放大*/
1 <!-- lightbox的样式/ 图片点击放大效果 --> 2 <link href="https://files.cnblogs.com/files/cainiao-chuanqi/img-css.css" rel="stylesheet"> 3 4 <!-- lightbox.js核心代码 --> 5 <script src="https://files.cnblogs.com/files/cainiao-chuanqi/img.js"></script> 6 <script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script> 7 <script type='text/javascript'>$(".code_img_closed").unwrap();</script> 8 <script type='text/javascript'>$(".code_img_opened").unwrap();</script>
补充：点赞样式
点赞动画声明（CSS处）
有一个问题一直没解决，就是小磁怪被目录样式遮挡了。怎么才能让它的控制样式在上面（以解决 ：在CSS 小磁怪处加上 z-index:9999 ; )。还有就是它的眼神不能动，明明其他的人就可以@。@
1 //加载进度条 2 #loadingProcess{ 3 position: absolute; 4 position: fixed; 5 top:0; 6 left: 0; 7 height: 3px; 8 box-sizing: border-box; 9 width: 0%; 10 background-color: @AccentColor; 11 background-image: linear-gradient(to right,transparent 0%,transparent 80%,#fff 100% ); 12 border-bottom-right-radius: 1px; 13 border-top-right-radius: 1px; 14 } 15 // 回复中代码片段会遮挡精灵球 16 .syntaxhighlighter{ 17 z-index: -1 18 } 19 /* 20 * 动画声明 21 */ 22 // Y轴移动 23 @keyframes jumping { 24 0% { 25 transform: translateY(0px); 26 } 27 50% { 28 transform: translateY(-400px); 29 } 30 100% { 31 transform: translateY(0px); 32 } 33 } 34 35 // 小磁怪的眼神动画 36 @keyframes eyemove { 37 0% { 38 transform: translate(0px,0px); 39 } 40 20% { 41 transform: translate(0px,0px); 42 } 43 25% { 44 transform: translate(0px,-10px); 45 } 46 45% { 47 transform: translate(0px,-10px); 48 } 49 50% { 50 transform: translate(0px,0px); 51 } 52 60% { 53 transform: translate(0px,0px); 54 } 55 65% { 56 transform: translate(-8px,0px); 57 } 58 85% { 59 transform: translate(-8px,0px); 60 } 61 90% { 62 transform: translate(0px,0px); 63 } 64 100% { 65 transform: translate(0px,0px); 66 } 67 } 68 69 /* 点赞样式Begin */ 70 @keyframes jumping { 71 0% { 72 transform: translateY(0px); 73 } 74 50% { 75 transform: translateY(-400px); 76 } 77 100% { 78 transform: translateY(0px); 79 } 80 } 81 #div_digg { 82 bottom: 0px; 83 bottom: 50px; 84 margin: 0px; 85 position: fixed; 86 right: 0.5rem; 87 right: 16px; 88 animation: jumping 5s ease-in-out; 89 animation-iteration-count: infinite; 90 } 91 92 .buryit { 93 display: none; 94 } 95 96 .diggit { 97 background: url(http://images.cnblogs.com/cnblogs_com/vvjiang/996881/o_ball2.png) no-repeat; 98 border-radius: 50%; 99 box-shadow: 0px 0px 15px 5px #fff inset; 100 cursor: pointer; 101 height: 100px; 102 margin: 0px; 103 padding: 0px; 104 width: 100px; 105 text-align: center; 106 107 &::before{ 108 content: "\8FD9\91CC\662F\70B9\8D5E\54E6"; 109 content: "这里是点赞哦"; 110 111 position: absolute; 112 top: -40px; 113 left: 7px; 114 font-size: 14px; 115 left: 0px; 116 font-size: 18px; 117 color: @ThemeColor; 118 } 119 } 120 #div_digg .diggnum { 121 color: #EEE; 122 font-family: Verdana; 123 font-size: 35px; 124 line-height: 2em!important; 125 } 126 #digg_tips{ 127 color: #fa5 !important; 128 width: 200px; 129 text-align: center; 130 margin-left: -50px; 131 margin-top: 20px; 132 } 133 134 a.digg_gray{ 135 font-size: 18px; 136 } 137 #xiaociguai{ 138 position: fixed; 139 bottom: 0; 140 right: 0; 141 width: 155px; 142 cursor: pointer; 143 } 144 #xiaociguai>img{ 145 width: 155px; 146 } 147 #xiaociguai::after{ 148 content: ''; 149 width: 2px; 150 height: 2px; 151 background-color: #666; 152 position: absolute; 153 left: 69px; 154 top: 43px; 155 animation: eyemove 10s ease-in-out; 156 animation-iteration-count: infinite; 157 } 158 #xiaociguai:hover,#xiaociguai.enable-electric{ 159 -webkit-filter: saturate(7); 160 filter: saturate(7); 161 } 162 163 /* 点赞样式End */
小磁怪的吸附效果
1 <!-- 此处放入页首Begin --> 2 <div id="loadingbar"> 3 <div id="loadingProcess"></div> 4 </div> 5 <script type="text/javascript"> 6 var loadingProcess = 0; 7 var isLoading = true; 8 var $loadingProcess = $('#loadingProcess'); 9 function loading() { 10 loadingProcess += 1; 11 if (loadingProcess >= 80) { 12 loadingProcess = 80; 13 } 14 $loadingProcess.css('width', loadingProcess + '%'); 15 if (!isLoading && loadingProcess === 80) { 16 $loadingProcess.css('width', '100%').hide(200); 17 } else { 18 requestAnimationFrame(loading); 19 } 20 } 21 loading(); 22 $(function () { 23 isLoading = false; 24 }) 25 </script> 26 <!-- 此处放入页首End --> 27 <!-- 此处放入页首Begin --> 28 <div id="loadingProcess"></div> 29 <script type="text/javascript"> 30 var loadingProcess = 0; 31 var isLoading = true; 32 var $loadingProcess = $('#loadingProcess'); 33 function loading() { 34 loadingProcess += 1; 35 if (loadingProcess >= 80) { 36 loadingProcess = 80; 37 } 38 $loadingProcess.css('width', loadingProcess + '%'); 39 if (!isLoading && loadingProcess === 80) { 40 $loadingProcess.css('width', '100%').hide(200); 41 } else { 42 requestAnimationFrame(loading); 43 } 44 } 45 loading(); 46 $(function () { 47 // 页面加载完毕，停掉加载动画 48 isLoading = false; 49 // 载入小磁怪 50 if ($('#div_digg').length === 1 || window.location.href.indexOf('\/p\/')!==-1) { 51 $(document.body).append('<img id="xiaociguai" title="电磁波切换" alt="电磁波切换" src="http://images.cnblogs.com/cnblogs_com/vvjiang/996881/o_xiaociguai1.jpg" />') 52 // 绑定停止精灵球跳动按钮 53 var isStopJump = false; 54 $('#xiaociguai').click(function (e) { 55 if (isStopJump) { 56 $('#div_digg').css('animation', 'jumping 5s ease-in-out').css('animation-iteration-count', 'infinite'); 57 $('#xiaociguai').removeClass('enable-electric') 58 } else { 59 $('#div_digg').css('animation', 'unset'); 60 $('#xiaociguai').addClass('enable-electric') 61 } 62 isStopJump = !isStopJump; 63 }) 64 } 65 }) 66 </script> 67 <!-- 此处放入页首End -->
/*补充 添加板娘*/
1 页面定制css 放上这个 2 /* 看板娘 */ 3 4 canvas#live2dcanvas { 5 border: 0 !important; 6 left: 0; 7 } 8 9 /* 看板娘 */ 10 11 页脚Html代码放上这个 12 <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script> 13 <script type="text/javascript"> 14 L2Dwidget.init(); 15 </script>
欢迎大家借鉴与指正
SimpleMemory愿路途漫长，以后莫失莫忘。 愿你不骄不躁，安稳顺心。
作者：菜鸟-传奇
本文版权归作者和博客园共有，重在学习交流，不以任何盈利为目的，欢迎转载。
敲敲小黑板：《刑法》第二百八十五条 【非法侵入计算机信息系统罪；非法获取计算机信息系统数据、非法控制计算机信息系统罪】违反国家规定，侵入国家事务、国防建设、尖端科学技术领域的计算机信息系统的，处三年以下有期徒刑或者拘役。违反国家规定，侵入前款规定以外的计算机信息系统或者采用其他技术手段，获取该计算机信息系统中存储、处理或者传输的数据，或者对该计算机信息系统实施非法控制，情节严重的，处三年以下有期徒刑或者拘役，并处或者单处罚金；情节特别严重的，处三年以上七年以下有期徒刑，并处罚金。
