博客美化---

Posted 2021-01-17 mayfly-nymph

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客美化---相关的知识，希望对你有一定的参考价值。

这次对博客进行了美化，主要有：

背景随机图片
增加时钟，音乐等
更改标签之间的距离
网页模板更换

第一次弄，大部分借鉴于各位园友，实际上对CSS/html 也不是很懂--萌新求照顾，但“万丈高楼平地起”，后期加油，毕竟前端挺好玩的。

附上源码：

<!-- 添加公告栏时钟 -->
<div id="clockdiv">
    <canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>

<p>签名：</p>
<blockquote ><b  style="front-family:verdana;color:red"><br />"书不记，熟读可记;义不精，细思可精;惟有志不立，直是无着力处。"<br /><br /></b></blockquote>
<hr />

<!--把“XXXXXXXX”替换成你的QQ号-->
<a target="_blank" href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1024593536" target="_blank""><img border="0" src="http://wpa.qq.com/pa?p=1:10245935:13" alt="有事您Q我" title="有事您Q我"></a>

<embed src="//music.163.com/style/swf/widget.swf?sid=29544794&type=2&auto=1&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>

<p>我的微信在这~WMITLV【加好友请注明姓名和来源。】</p>

<address>
Written by <a href="mailto:[email protected]">Mayfly</a><p>(点击发送邮件)</p><br /> 
</address>
 
<a href="https://info.flagcounter.com/XRTq"><img src="https://s04.flagcounter.com/count2/XRTq/bg_FFFFFF/txt_0A0202/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>



<!-- 为页面添加爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined){
    var hearts = [];
    
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback){
             setTimeout(callback,1000/60);
         }
    })();
    
    init();

    function init(){
        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;}");
        attachEvent();
        gameloop();
    }

    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
             }

             hearts[i].y--;
             hearts[i].scale += 0.004;
             hearts[i].alpha -= 0.013;
             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;
        }

        requestAnimationFrame(gameloop);
    }

    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }

    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });

        document.body.appendChild(d);
    }

    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }
        catch(ex){
            style.styleSheet.cssText = css;
        }

        document.getElementsByTagName(‘head‘)[0].appendChild(style);
    }

    function randomColor(){
        return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }
    
})(window,document);
</script>



 <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 


 
 



 
 
 
 <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 
 



 
 </div></div>

侧边公告栏

body {
    color: #000;
    background: url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_pic2.jpg) 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;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js自定义图像悬停</title>

<style>
html {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: ‘Lato‘, sans-serif;
    font-size: 16px;
}

.social-icon a {
  position: fixed;
  background: white;
  color: white;
  display: inline-block;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: .15s ease;
  z-index: 30;
}

.social-icon i {
  position: absolute;
  font-size: 1.8em;
  pointer-events: none;
  z-index: 1000;
}

.social-icon:hover a {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.05);
}

.youtube a {
  top: 100%;
  left: 0%;
  box-shadow: 0px 0px 15px 5px rgba(230, 33, 23, 0.5);
}

.youtube i {
  left: 8px;
  bottom: 8px;
  color: #E62117;
}

.github a {
  top: 100%;
  left: 100%;
  box-shadow: 0px 0px 15px 3px rgba(126, 126, 126, 0.5);
}

.github i {
  right: 8px;
  bottom: 8px;
}


#canvas-container-1{
  height: 100%;
  width: 100%;
  background: black;
}

#canvas-1{
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#site-link{
  color: #0099ff;
  display: inline-block;
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-variant: small-caps;
}

/* 定制返回顶部按键 */
#toTop {
    background: url(//http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_toTop.bmp) no-repeat 0px top;
    width: 57px;
    height: 57px;
    overflow: hidden;
    position: fixed;
    right: 180px;
    bottom: 20px;
    cursor: pointer;
}

/* 定制推荐和反对按键 */
#div_digg{
  position:fixed;
  bottom:-10px;
  width:120px;
  right:20px;
  box-shadow: 0 0 6px #0000FF;
  border:2px solid #FF0000;
  padding:4px;
  background-color:#fff;
  border-radius:4px 4px 4px 4px !important;
}

.icon_favorite {
    background: transparent url(‘http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_kj.gif‘) no-repeat 0 0;
    padding-left: 15px;
}

#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}

/* 定制公告栏时钟位置 */
#clockdiv {
    /* left, center, right */
    text-align: center;
}



<!-- 为页面添加爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined){
    var hearts = [];
    
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback){
             setTimeout(callback,1000/60);
         }
    })();
    
    init();

    function init(){
        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;}");
        attachEvent();
        gameloop();
    }

    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
             }

             hearts[i].y--;
             hearts[i].scale += 0.004;
             hearts[i].alpha -= 0.013;
             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;
        }

        requestAnimationFrame(gameloop);
    }

    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }

    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });

        document.body.appendChild(d);
    }

    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }
        catch(ex){
            style.styleSheet.cssText = css;
        }

        document.getElementsByTagName(‘head‘)[0].appendChild(style);
    }

    function randomColor(){
        return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }
    
})(window,document);
</script>

页面定制CSS代码

<!DOCTYPE html>
<html>
<body>

<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>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/10);};
    var W=document.body.scrollWidth,H=document.body.scrollHeight;
    var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
    var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
    var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
    var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();

    function RandomNum(Min,Max){
        var Range=Max-Min;
        var Rand=Math.random();
        return(Min+Math.round(Rand * Range));
    }
    function RandomReal(Min,Max){
        return Min+(Max-Min)*Math.random();
    }
    function abs(W){return W<=0?-W:W;}
    function drawtail(px,py,an){
        an=Math.atan(an);
        for (var i=0;i<10;i++){
            var X,Y;
            Y=Math.sqrt(RandomReal(0,lline*lline));
            X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
            Y=lline-Y;
            X+=10;
            el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
        }
    }
    function drawstar(px,py,ti){
        if (ti==1) el.drawImage(img1,px,py,20,20);else
        if (ti==2) el.drawImage(img2,px,py,20,20);else
        if (ti==3) el.drawImage(img3,px,py,20,20);else
        if (ti==4) el.drawImage(img4,px,py,20,20);
    }
    function drawline(sx,sy,px,py){
        el.beginPath();
        el.moveTo(sx,sy);
        el.lineTo(px,py);
        el.stroke();
        el.closePath();
    }
    function dis(sx,sy,px,py){
        return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
    }
    function work(timestamp){
        if (RandomNum(0,5)==0){
            x.push(RandomNum(0,W));
            y.push(RandomNum(0,H));
            t.push(0);
            TT.push(RandomNum(3,10));
            speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
            angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
            for (;;){
                if (Math.random()<=0.7) y[num]=0;else{
                    y[num]%=200;
                    if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
                }
                var i;
                for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
                if (i==num) break;
                x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
            }
            num++;
        }
        el.clearRect(0,0,W,H);
        el.fillStyle="#7B68EE";
        var tmp;
        for (var i=0;i<num;i++)
        for (var j=i+1;j<num;j++)
        if (dis(x[i],y[i],x[j],y[j])<20){
            tmp=speed[i];
            speed[i]=speed[j];
            speed[j]=tmp;
            
            tmp=angle[i];
            angle[i]=angle[j];
            angle[j]=tmp;
        }
        for (var i=0;i<num;i++){
            //el.fillRect(x[i],y[i],10,10);
            drawtail(x[i],y[i],angle[i]);
            drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
            y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
            t[i]++;
            if (y[i]>=H||x[i]<0||x[i]>=W){
                num--;
                x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
                x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
                i--;
            }
        }
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
    var sta=1;
    function control(){
        if (sta==1){
            cancelAnimationFrame(timer);
            ca.style.opacity="0";
            sta=0;
        }else{
            timer=requestAnimationFrame(work);
            ca.style.opacity="1";
            sta=1;
        }
    }
    
    
    function ShowTab(){
        dx=document.getElementById("MagicArray");
        if (dx.style.width=="200px"){
            dx.style.width="0px";
            dx.style.height="0px";
            dx.style.bottom="100px";
            dx.style.right="100px";
            dx.style.transform="rotate(0deg)";
        }else{
            dx.style.width="200px";
            dx.style.height="200px";
            dx.style.bottom="0px";
            dx.style.right="0px";
            dx.style.transform="rotate(180deg)";
        }
    
        dy=document.getElementsByName("Tab");
        for (var i=0;i<y.length;i++){
            dx=dy[i];
            if (dx.style.fontSize=="15px"){
                dx.style.fontSize="0px";
                dx.style.transitionDelay="0s";
            }else{
                dx.style.fontSize="15px";
                dx.style.transitionDelay="0.8s";
            }
        }
    }
    function ShowPicture(){
        dx=document.getElementById("main");
        if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
    }
    function ChangePicture(){
        dx=document.body;
        dy=RandomNum(0,14);
        if (dy==0){
            dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_pic2.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==1){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_picture1.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==2){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_ghostblade_by_wlop_d8i94nx-fullview.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==3){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_164404qas98559n01slq07.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==4){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_darvb38-6e015fe5-ca69-4e7f-bfce-9a515a26ba37.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==5){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dba1c7d-ef42bfde-ec75-42d3-8e77-0534f4bcc528.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==6){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dbjz9lh-829f3d6d-50d3-404d-bcd9-9099e59076e2.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==7){
            dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_dc4f3ik-1183f349-fc4f-4b07-a3e3-2b238ddb9adb.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==8){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dcauzp2-3acd9be8-5ac6-4747-9b72-f95fe1c3c730.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==9){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_fall_by_wlop_dbmfxto-fullview.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==10){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dccxg4s-28ec7113-ec88-4688-96f0-dd8c28e587f5.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==11){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_WLOP%20%e9%ac%bc%e5%88%80%20%e5%b0%8f%e7%bb%bf%204K%e5%a3%81%e7%ba%b8.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==12){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_wlop%e9%ac%bc%e5%88%80%e9%ab%98%e6%b8%85%e5%a3%81%e7%ba%b81920x1241.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==13){
            dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_%e5%a5%b3%e5%ad%a9%e5%92%8c%e7%8c%ab6k%e5%8a%a8%e6%bc%ab%e5%9b%be%e7%89%87.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==14){
            dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_627cdf7f0c228c9748674e157a179820.png) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }
    }
    ChangePicture();

</script>

</body>
</html>

页首HTML代码

源码下载地址：https://www.lanzous.com/i2a123i

附加（可以自行选择添加）：

仓鼠，小狗等插件源码获取地址：http://abowman.com/

博客时钟：http://www.blogclock.cn/index.aspx