博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我

  • A+
所属分类:Web前端
摘要

  首先得感谢Angel_Kitty,小姐姐的博客 impress me deeply!!! ,所以我忍不住cv了好多她的样式,感觉我没救了(二次元化有点严重)


前言

  首先得感谢Angel_Kitty

小姐姐的博客 impress me deeply!!! ,所以我忍不住cv了好多她的样式,感觉我没救了(二次元化有点严重)

中间经过了一些波折,有的样式在小姐姐的博客中有,有的cv显示不正常(可能是我姿势不对),有的自己改一下,cv一下别人的,结果背景图片出问题了,,,,,,,,,,,,,,,,,,,

 

自定义css

我直接用皮肤<em>Simple Memory</em>,没有禁用默认模板

body {     color: #000;     background: url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_211012103620bj.jpg) fixed;  bgproperties=fixed     background-size: cover;     background-repeat: repeat;     font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;     font-size: 12px;     min-height: 101%; } #blogTitle h1 {     font-size: 50px;     font-family: Consolas;     font-weight: bold;     font-style: italic;     margin-top: 20px; } .catListTitle {     margin-top: 21px;     margin-bottom: 10.5px;     text-align: left;     border-left: 10px solid rgba(82, 168, 236, 0.8);     padding: 5px 0 5px 10px;     background-color: rgba(245,245,245,0.3); } #home {     margin: 0 auto;     width: 65%;     min-width: 950px;     background-color: rgba(255,255,255,0.8);     padding: 30px;     margin-top: 50px;     margin-bottom: 50px;     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {     background: none;     margin-bottom: 35px;     word-wrap: break-word; } #blog-calendar td {     font-size: 12px;     font-family: Consolas; } .input_my_zzk {     border: 1px solid #ccc;     background: none;     width: 100%;     height: 25px;     padding-right: 30px;     padding-left: 5px;     outline: 0; } .CalDayHeader {     background: rgba(245,245,245,0.3) !important;     font-weight: 100;     color: #5E5F63; } .CalTitle {     background: none;     width: 100%;     height: 25px;     text-align: center;     font-size: 14px;     font-weight: bold;     padding: 5px 0;     color: #FFF; } .CalTitle td {     background: rgba(245,245,245,0.3) !important;     border: 0px !important;     color: #5E5F63;     font-family: "Comic Sans MS"; } a:link {     color: cornflowerblue; } a:visited {     color: cornflowerblue; } a:hover {     color:cadetblue; } a:active {     color:black; } .CalTodayDay {     background: rgba(247,247,247,0.3) !important;     color: #FFF;     font-weight: bold; } .cnblogs_code {     background-color: rgba(247,247,247,0.3);     font-family: Consolas !important;     font-size: 12px!important;     border: 1px solid #ccc;     padding: 5px 10px;     overflow: auto;     margin: 5px 0;     color: #000; } .cnblogs_code div {     background-color: rgba(247,247,247,0.3); } .cnblogs_code_collapse {     border-right: gray 1px solid;     border-top: gray 1px solid;     border-left: gray 1px solid;     border-bottom: gray 1px solid;     background-color: rgba(247,247,247,0.3);     padding: 2px; } blockquote {     background: rgba(247,247,247,0.3);     border: 2px solid #efefef;     padding-left: 10px;     padding-right: 10px;     padding-top: 5px;     padding-bottom: 5px;     margin-top: 10px;     margin-bottom: 10px; } div.commentform input.author, div.commentform input.email, div.commentform input.url {     background-image: url(http://static.cnblogs.com/images/icon_form.gif);     border: 1px solid white !important;     padding: 4px 4px 4px 30px;     width: 300px;     font-size: 13px;     background-color: rgba(247,247,247,0.3); } #comment_form_container .comment_textarea {     width: 362px;     height: 200px;     font-size: 13px;     padding: 8px;     margin-bottom: 10px;     color: #555;     border: 1px solid white;     border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     background-color: rgba(247,247,247,0.3); } .cnblogs_code pre { font-family: Consolas !important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; } .cnblogs_code span { font-family: Consolas !important; font-size: 12px!important; line-height: 1.5!important; } div#cnblogs_c2 { display: none; } div#cnblogs_c1 { display: none; } div#under_post_news { display: none; } div#ad_t2 { display: none; } div#under_post_kb { display: none; } .feedbackItem {     margin: 10px 5px 0px;     padding: 5px;     box-shadow: 0 0 10px 0 #AAA; } #topics .postTitle {     font-size:230%; } .postTitle a:link, .postTitle a:visited, .postTitle a:active {     color: #21759b;     transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s; } #cnblogs_post_body h2 {     border-left: 10px solid rgba(82, 168, 236, 0.3);     background: rgba(247,247,247, 0.3);     padding: 3px 10px; } #cnblogs_post_body h3{     border-left: 5px solid rgba(0, 235, 255, 0.3);     padding: 2px 5px;     background: rgba(247,247,247,0.3); } #cnblogs_post_body h4{     border-left: 5px solid rgba(222, 101, 114,0.3);     padding-left: 5px;     background: rgba(247,247,247,0.3); } #cnblogs_post_body h1{     background: rgba(247,247,247,0.3);     border-left: 15px solid rgba(0, 122, 255, 0.3);     padding: 3px 10px;     font-size: 175%;     border-right: 15px solid rgba(0, 122, 255, 0.3); } .buryit {     display: none; } #div_digg {     float: right;     position: fixed;     width: auto;     bottom: 10px;     left: 70%;     margin-bottom: 10px;     background: rgba(247,247,247,0.3);     margin-right: 30px;     font-size: 12px;     box-shadow: 0 0 10px 0 #AAA;     padding: 10px;     border: 2px solid rgba(82, 168, 236, 0.8);     text-align: center;     margin-top: 10px; } textarea {     background: rgba(247,247,247,0.3); } body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}  #navigatorTitleDiv {     padding: 3px;     position: fixed;     top:244px;     right:304px;     font-weight:bold;     cursor:pointer;     background-color: antiquewhite; }  #navigatorDiv {     border-style:double;     padding: 10px;     padding-top:30px;     position: fixed;     top:240px;     right:300px;     background-color: antiquewhite; }  /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */ .pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}  /*下面是我设置背景色,字体大小和字体*/ .cnblogs-markdown code{ background:#fff!important; } .cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{     font-size:16px!important; }  .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: 16px!important; }  .cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{ font-family:consolas, "Source Code Pro", monaco, monospace !important; } /*去除编辑推荐和最新新闻*/ #under_post_card1{  display: none !important; } #under_post_card2{  display: none !important; }

 

 博客侧边栏公告

<!DOCTYPE html> <html> <style> /*最外层容器样式*/ .wrap{     top: 0;     right: 0;     bottom: 0;     left: 0;     width: 200px;     height: 200px;     margin: auto;     /*改变左右上下,图片方块移动*/ } /*包裹所有容器样式*/ .cube{     width: 200px;     height: 200px;     margin: 0 auto;     transform-style: preserve-3d;     transform: rotateX(-30deg) rotateY(-80deg);     -webkit-animation: rotate 20s infinite;     /*匀速*/     animation-timing-function: linear; } @-webkit-keyframes rotate{     from{transform: rotateX(0deg) rotateY(0deg);}     to{transform: rotateX(360deg) rotateY(360deg);} } .cube div{     position: absolute;     width: 200px;     height: 200px;     opacity: 0.8;     transition: all .4s; } /*定义所有图片样式*/ .pic{     width: 200px;     height: 200px; } .cube .out_front{     transform: rotateY(0deg) translateZ(100px); } .cube .out_back{     transform: translateZ(-100px) rotateY(180deg); } .cube .out_left{     transform: rotateY(90deg) translateZ(100px); } .cube .out_right{     transform: rotateY(-90deg) translateZ(100px); } .cube .out_top{     transform: rotateX(90deg) translateZ(100px); } .cube .out_bottom{     transform: rotateX(-90deg) translateZ(100px); } /*定义小正方体样式*/ .cube span{     display: bloack;     width: 100px;     height: 100px;     position: absolute;     top: 50px;     left: 50px; } .cube .in_pic{     width: 100px;     height: 100px; } .cube .in_front{     transform: rotateY(0deg) translateZ(50px); } .cube .in_back{     transform: translateZ(-50px) rotateY(180deg); } .cube .in_left{     transform: rotateY(90deg) translateZ(50px); } .cube .in_right{     transform: rotateY(-90deg) translateZ(50px); } .cube .in_top{     transform: rotateX(90deg) translateZ(50px); } .cube .in_bottom{     transform: rotateX(-90deg) translateZ(50px); } /*鼠标移入后样式*/ .cube:hover .out_front{     transform: rotateY(0deg) translateZ(200px); } .cube:hover .out_back{     transform: translateZ(-200px) rotateY(180deg); } .cube:hover .out_left{     transform: rotateY(90deg) translateZ(200px); } .cube:hover .out_right{     transform: rotateY(-90deg) translateZ(200px); } .cube:hover .out_top{     transform: rotateX(90deg) translateZ(200px); } .cube:hover .out_bottom{     transform: rotateX(-90deg) translateZ(200px); }     .tc{    width: 100px;     height: 100px;     }     .wd p{ font-family: Lato,Helvetica,Arial,sans-serif; width: 230px;     height: 40px;     } </style> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> function autoPlayVideo(){    wx.config({          debug:false,          appId:"",          timestamp:1,          nonceStr:"",          signature:"",          jsApiList:[]      });      wx.ready(function(){          var autoplayVideo = document.getElementById("music");          autoplayVideo.play()      })  };  autoPlayVideo(); </script> <div class= "ewm"> <p>欢迎大家扫下面的二维码关注安全学习交流群</p> <p> <!-- 菜鸟联盟二维码 --> <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044054/o_211012070818AC7DBEC52C41831F7C03B6C51AC898ED.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" alt="" width="230" height="300"> </p> <p>欢迎来这里讨论,不断学习,共同进步。</p>     </div>         <div class="tc"></div>         <!--/*外层最大容器*/-->         <div class="wrap">     <!--    /*包裹所有元素的容器*/-->         <div class="cube">             <!--前面图片 -->             <div class="out_front">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_2110120725581.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"  class="pic"/>             </div>             <!--后面图片 -->             <div class="out_back">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_2110120726082.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"  class="pic"/>             </div>             <!--左图片 -->             <div class="out_left">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_2110120726133.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"  class="pic"/>             </div>             <div class="out_right">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_2110120728155.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"  class="pic"/>             </div>             <div class="out_top">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_2110120728266.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"  class="pic"/>             </div>             <div class="out_bottom">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/o_2110120753034.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"  class="pic"/>             </div>             <!--小正方体 -->              <span class="in_front">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_2110120728377.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" class="in_pic" />             </span>             <span class="in_back">                  <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/o_2110120728438.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" class="in_pic" />             </span>             <span class="in_left">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/o_2110120728519.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" class="in_pic" />             </span>             <span class="in_right">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_21101207285710.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" class="in_pic" />             </span>             <span class="in_top">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_21101207290211.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" class="in_pic" />             </span>             <span class="in_bottom">                 <img src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044100/t_21101207290812.jpg" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我" class="in_pic" />             </span>         </div>         </div>         <div class="tc"></div>     <img width="230" height="230"  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F03%2F20171203001451_QwesH.thumb.400_0.gif&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636621850&t=7e30bd702f4e0a07ab2a047118998621f" class="img_avatar"> <div class="wd"> <p>宅男一枚,有事q我</p> <p>qq:2694200519</p> <p>微信:A2694200519</p> <p>java后端转信息安全</p> <p> 热爱交友!     </p> <p> 希望大家多多支持,觉得文章好可以点个赞,动动你的鼠标加下关注哦     </p> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2694200519&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:2694200519:13" alt="有事您Q我" title="有事您Q我"></a> </div> </html>

 

页首html代码

<!DOCTYPE html> <html> <body> <!--- 小火箭--> <style> #back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99; } #back-top span { width: 150px; height: 174px; display: block; background: url(https://i.loli.net/2018/04/20/5ad9ad7857b27.png)no-repeat center center; } #back-top a{outline:none} </style> <script type="text/javascript"> $(function() { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(window).scroll(function() { if ($(this).scrollTop() > 500) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); </script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> <!--- 小火箭-->  <!--- qq发起临时会话--> <a href="https://github.com/lunatic1213546a" target="_blank">   <img style="position: fixed; top: 0; left: 0; border: 0; z-index: 1;" src="https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044173/o_211012092210gitup.png" alt="博客园自定义页面风格设计美化(自定义css,公告栏,页首,页尾),有问题欢迎随时联系我"> </a> <!--- qq发起临时会话-->  <!--- 背景图片每次请求随时切换--> <style> #Canvas{ position:fixed; top:0px; left:0px; } </style> <canvas id="Canvas"></canvas> <style> #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% } </style> <script> function RandomNum(Min,Max){ var Range=Max-Min; var Rand=Math.random(); return(Min+Math.round(Rand * Range)); } function ChangePicture(){ dx=document.body; dy=RandomNum(0,7); if (dy==0){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_211012103620bj.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; }else if (dy==1){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_2110120918101.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; }else if (dy==2){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_2110120918172.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; }else if (dy==3){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_2110120918233.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; }else if (dy==4){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_2110120918304.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; }else if (dy==5){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_2110120920478.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; }else if (dy==6){ dx.style.background="url(https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044172/o_2110120921257.jpg) no-repeat fixed"; dx.style.backgroundSize="cover"; } } ChangePicture(); </script> <!--- 背景图片每次请求随时切换--> </body> </html>

 

页脚html代码

<!-- 代码高亮-->
<script src="https://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
$("pre").addClass("prettyprint");
prettyPrint();
})();
</script>
<!-- 代码高亮-->

<!--自动生成目录-->
<script language="javascript" type="text/javascript">
// 生成目录索引列表
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
return;

if(h2_list.length>0)
{
var content = '<a rel="nofollow" name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a rel="nofollow" href="#_labelTop">Return Top</a><a rel="nofollow" name="_label' + i + '"></a></div>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h2').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a rel="nofollow" name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a rel="nofollow" href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a rel="nofollow" href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a rel="nofollow" href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</div><p>&nbsp;</p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>
<!--自动生成目录-->

<!-- 雪花 -->
<script type="text/javascript">
window.onload = function () {
var minSize = 15; //最小字体
var maxSize = 30;//最大字体
var newOne = 500; //生成雪花间隔, 数值越小越快
var flakColor = "#FFFFFF"; //雪花颜色
var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("❉");//定义一个雪花
var dhight = $("body").height(); //定义视图高度
var dw =$(window).width()-80; //定义视图宽度
setInterval(function(){
var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
var startLeft = Math.random()*dw; //雪花生成是随机的left值
var startOpacity = 0.7+Math.random()*0.3; //随机透明度
var endTop= dhight-100; //雪花停止top的位置
var endLeft= Math.random()*dw; //雪花停止的left位置
var durationfull = 5000+Math.random()*6000; //雪花飘落速度不同, 数值越大越慢
flak.clone().appendTo($("body")).css({
"left":startLeft ,
"opacity":startOpacity,
"font-size":sizeflak,
"color":flakColor
}).animate({
"top":endTop,
"left":endLeft,
"apacity":0.1
},durationfull,function(){
$(this).remove()
});
},newOne);
}
</script>
<!-- 雪花 -->

<!--富强民主点击特效-->
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
var b_idx = 0;
/* 文字和颜色数组 */
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var b = new Array("#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF","#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF");
jQuery(document).ready(function($) {
$("body").click(function(e) {

var $i = $("<span/>").text(a[a_idx]);
a_idx=parseInt(12*Math.random()); //文字随机数
b_idx=parseInt(14*Math.random()); //颜色随机数
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999,
"font-size":"1.3em", //字体大小
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": b[b_idx]
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--富强民主点击特效-->

<!--手机打赏start-->
<script>
window.tctipConfig = {
staticPrefix: "http://static.tctip.com",
cssPrefix: "http://static.tctip.com",
buttonImageId: 5,
buttonTip: "dashang",
list:{
alipay: {qrimg: "https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044356/o_211013172528zfb.jpg"},
weixin:{qrimg: "https://images.cnblogs.com/cnblogs_com/blogs/710948/galleries/2044356/o_211013172523wx.jpg"},
}
};
</script>
<script src="http://static.tctip.com/js/tctip.min.js"></script>
<!--手机打赏end-->

 

之后就很okl,遇到任何问题欢迎随时联系我