关于一些blog优化

有很多的好看的$java\ script$

可以大大的增加$blog$的好看度。

这里，本宝宝就列举几个

upd:不定期更新

1.有木有觉得背景的小姐姐和雪花特效极其的配啊啊啊！！！

　　页面定制CSS插入以下代码：

/*雪花css*/
#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}
/*雪花css  end*/

　　侧边栏插入如下代码：前提是支持js

 <div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>

 2.公告里的访客数量（先去这里 注册一个新的数量记录）

　　侧边栏插入如下代码

    访客数量：<br>
    <img src="http://cc.amazingcounters.com/counter.php?i=3222245&c=9667048"/> <br>
<!-- src里面插入url链接,添加时删除此行 -->

3.浏览器切换

　　页首$html$

<script>  
// 浏览器标题切换  
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title ='你不要我了么？qwq';  // 切出文字
        clearTimeout(titleTime);  
    }else{  
        document.title = '我喜欢你啊。';  // 切入文字
        titleTime = setTimeout(function() {  
            document.title = OriginTitile;  
        }, 1000); // 2秒后恢复原标题  
    }  
});  
</script>

4.鼠标点击特效

　　页脚$html$

<script type="text/javascript" language="javascript">
var getRandomColor = function(){
  return  '#' +
    (function(color){
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
      && (color.length == 6) ?  color : arguments.callee(color);
  })('');
}
//随机生成颜色
onload = function() {
    var click_cnt = 0;
    var $html = document.getElementsByTagName("html")[0];
    var $body = document.getElementsByTagName("body")[0];
    $html.onclick = function(e) {
        var $elem = document.createElement("b");
        $elem.style.color = getRandomColor();
        $elem.style.zIndex = 9999;
        $elem.style.position = "absolute";
        $elem.style.select = "none";
        var x = e.pageX;
        var y = e.pageY;
//      var st= new Array("\u82CF","\u537F","\u5FF5","\u662F","\u6700","\u83DC","\u7684");
        //&#x82CF;&#x537F;&#x5FF5;&#x662F;OI&#x6700;&#x83DC;&#x7684;苏卿念是最菜的


//      var st= new Array("\u6211","\u559C","\u6B22","\u4F60","\u554A","\u2026","\u2026");
        //&#x6211;&#x559C;&#x6B22;&#x4F60;&#x554A;&#x2026;&#x2026;我喜欢你啊……

        var st= new Array("\u4F60","\u7279","\u522B","\u597D","\uFF0C","\u6211","\u559C","\u6B22","\u4F60","\u3002");
        //&#x4F60;&#x7279;&#x522B;&#x597D;&#xFF0C;&#x6211;&#x559C;&#x6B22;&#x4F60;&#x3002;你特别好，我喜欢你。
//按照如上的例子添加，必须转utf-8


        $elem.style.left = (x - 10) + "px";
        $elem.style.top = (y - 20) + "px";
        //$elem.innerText = "OωO";
        clearInterval(anim);
        $elem.innerText = st[click_cnt%10];
//模数是总共的字数

        click_cnt++;
        $elem.style.fontSize = Math.random() * 10 + 15 + "px";
        var increase = 0;
        var anim;
        setTimeout(function() {
            anim = setInterval(function() {
                if (++increase == 200) {
　　　　　　　　　　//上升高度
                    clearInterval(anim);
                    $body.removeChild($elem);
                }
                $elem.style.top = y - 20 - increase*2 + "px"; //increas*速度，数越大，速度越快.
                $elem.style.opacity = (200 - increase*2) / 120;
            }, 8);
        }, 70);
        $body.appendChild($elem);
    };
};
</script>

 

4.$pretty \ \ print$

　　(1).$CSS$中插入：

　　

/*代码高亮*/
figure.highlight {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #eee ;
  line-height: 1.6;
  overflow: auto;
  position: relative;
  font-size: 0.9em; 
}
figure.highlight figcaption {
  color: #999;
  margin-bottom: 5px;
  text-shadow: 0 0 1px #eee ;
}
figure.highlight figcaption a {
  position: absolute;
  right: 15px;
}
figure.highlight pre {
  border: none;
  padding: 0;
  margin: 0;
}
figure.highlight table {
  margin-top: 0;
  border-spacing: 0;
}
figure.highlight .gutter {
  color: #999;
  padding: 7px 10px 7px 5px !important;
  border-right: 1px solid #ddd;
  text-align: right;
}
figure.highlight .code {
  padding: 7px 7px 7px 10px !important;
  border-left: 1px solid #fff;
  color: #666;
}
/*下面是各种代码的颜色*/
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #93a1a1;
  font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {
  color: #268bd2;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
.feedbackListSubtitle { position: relative;}
.feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;}
.likecs_code_toolbar {display: none;}
#likecs_post_body {overflow: hidden;}
#likecs_post_body ol { padding-left: 40px;}
#likecs_post_body ul { margin-left: 35px;}
.fixedReadRank { position: fixed; top: 20px; width: 270px; }
.fixedRecRank { position: fixed; top: 360px; width: 270px; }
figure.highlight { margin-top: 0; padding: 0;}
figure table {width: 100%; margin: 0 !important;}
#likecs_post_body pre { padding: 0; }
#likecs_post_body th, #likecs_post_body td { padding: 0; }
.likecs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;}
.likecs_code th {border: 1px solid silver; padding: 3px;}
.likecs_code { padding: 0;}

View Code