博客园自定义主题

/*simplememory*/
#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;
}
#home {
opacity: 0.65;
margin: 0 auto;
width: 85%;
min-width: 950px;
background-color: raba(0,0,10,0.9);
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{  
display: none !important;
}
body {
color: #000;
background: url(http://images.cnblogs.com/cnblogs_com/guokaifeng/1510878/o_1.jpg) fixed;
/*background-size: 100%;*/
background-repeat: round;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
width: 100%;
padding-left: 5px;
}


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;
}
.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;
}

<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", .9),
                    c: n(i, "color", "242 ,8 ,52"),
                    n: n(i, "count", 260)
                }
            }

            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>

<script type="text/javascript">
var BlogDirectory = {
    /*
        获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
    */
    getElementPosition:function (ele) {        
        var topPosition = 0;
        var leftPosition = 0;
        while (ele){              
            topPosition += ele.offsetTop;
            leftPosition += ele.offsetLeft;        
            ele = ele.offsetParent;     
        }  
        return {top:topPosition, left:leftPosition}; 
    },

    /*
    获取滚动条当前位置
    */
    getScrollBarPosition:function () {
        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
        return  scrollBarPosition;
    },
    
    /*
    移动滚动条，finalPos 为目的位置，internal 为移动速度
    */
    moveScrollBar:function(finalpos, interval) {

        //若不支持此方法，则退出
        if(!window.scrollTo) {
            return false;
        }

        //窗体滚动时，禁用鼠标滚轮
        window.onmousewheel = function(){
            return false;
        };
          
        //清除计时
        if (document.body.movement) { 
            clearTimeout(document.body.movement); 
        } 

        var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

        var dist = 0; 
        if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
            window.onmousewheel = function(){
                return true;
            }
            return true; 
        } 
        if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
            dist = Math.ceil((finalpos - currentpos)/10); 
            currentpos += dist; 
        } 
        if (currentpos > finalpos) { 
            dist = Math.ceil((currentpos - finalpos)/10); 
            currentpos -= dist; 
        }
        
        var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
        window.scrollTo(0, currentpos);//移动窗口
        if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
        {
            window.onmousewheel = function(){
                return true;
            }
            return true;
        }
        
        //进行下一步移动
        var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
        document.body.movement = setTimeout(repeat, interval); 
    },
    
    htmlDecode:function (text){
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    },

    /*
    创建博客目录，
    id表示包含博文正文的 div 容器的 id，
    mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
    interval 表示移动的速度
    */
    createBlogDirectory:function (id, mt, st, interval){
         //获取博文正文div容器
        var elem = document.getElementById(id);
        if(!elem) return false;
        //获取div中所有元素结点
        var nodes = elem.getElementsByTagName("*");
        //创建博客目录的div容器
        var divSideBar = document.createElement('DIV');
        divSideBar.className = 'uprightsideBar';
        divSideBar.setAttribute('id', 'uprightsideBar');
        var divSideBarTab = document.createElement('DIV');
        divSideBarTab.setAttribute('id', 'sideBarTab');
        divSideBar.appendChild(divSideBarTab);
        var h2 = document.createElement('H2');
        divSideBarTab.appendChild(h2);
        var txt = document.createTextNode('目录导航');
        h2.appendChild(txt);
        var divSideBarContents = document.createElement('DIV');
        divSideBarContents.style.display = 'none';
        divSideBarContents.setAttribute('id', 'sideBarContents');
        divSideBar.appendChild(divSideBarContents);
        //创建自定义列表
        var dlist = document.createElement("dl");
        divSideBarContents.appendChild(dlist);
        var num = 0;//统计找到的mt和st
        mt = mt.toUpperCase();//转化成大写
        st = st.toUpperCase();//转化成大写
        //遍历所有元素结点
        for(var i=0; i<nodes.length; i++)
        {
            if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
            {
                //获取标题文本
                var nodetext = nodes[i].innerHTML.replace(/</?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
                nodetext = nodetext.replace(/&nbsp;/ig, "");//替换掉所有的&nbsp;
                nodetext = BlogDirectory.htmlDecode(nodetext);
                //插入锚        
                nodes[i].setAttribute("id", "blogTitle" + num);
                var item;
                switch(nodes[i].nodeName)
                {
                    case mt:    //若为主标题 
                        item = document.createElement("dt");
                        break;
                    case st:    //若为子标题
                        item = document.createElement("dd");
                        break;
                }
                
                //创建锚链接
                var itemtext = document.createTextNode(nodetext);
                item.appendChild(itemtext);
                item.setAttribute("name", num);
                item.onclick = function(){        //添加鼠标点击触发函数
                    var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                    if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                };            
                
                //将自定义表项加入自定义列表中
                dlist.appendChild(item);
                num++;
            }
        }
        
        if(num == 0) return false; 
        /*鼠标进入时的事件处理*/
        divSideBarTab.onmouseenter = function(){
            divSideBarContents.style.display = 'block';
        }
        /*鼠标离开时的事件处理*/
        divSideBar.onmouseleave = function() {
            divSideBarContents.style.display = 'none';
        }

        document.body.appendChild(divSideBar);
    }
    
};

window.onload=function(){
    /*页面加载完成之后生成博客目录*/
    BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
}
</script>

/* 鼠标点击文字特效 */
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤","❤左三圈❤","❤右三圈❤","❤脖子扭扭❤","❤屁股扭扭❤","❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

<style type="text/css">
.p-canvas {
            position: fixed;
            left: 0;
            top: 0;
            pointer-events: none;
        }
</style>
 <script>

        var canvas = document.createElement('canvas');
        canvas.className = 'p-canvas';
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        document.body.appendChild(canvas);
        c = canvas.getContext('2d');

        window.addEventListener('resize', function () {
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;

            initCanvas();
        })

        var mouse = {
            x: undefined,
            y: undefined
        }
        window.addEventListener('mousemove',
            function (event) {
                mouse.x = event.x;
                mouse.y = event.y;
                drawCircles();
            }
        )
        window.addEventListener("touchmove",
            function (event) {
                let touch = event.touches[0];
                mouse.x = touch.clientX;
                mouse.y = touch.clientY;
                drawCircles();
            }
        )

        function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.minRadius = radius;
            this.vx = vx;
            this.vy = vy;
            this.birth = birth;
            this.life = life;
            this.opacity = opacity;

            this.draw = function () {
                c.beginPath();
                c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
                c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
                c.fill();
            }

            this.update = function () {
                if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                    this.vx = -this.vx;
                }

                if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                    this.vy = -this.vy;
                }

                this.x += this.vx;
                this.y += this.vy;

                this.opacity = 1 - (((frame - this.birth) * 1) / this.life);

                if (frame > this.birth + this.life) {
                    for (let i = 0; i < circleArray.length; i++) {
                        if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
                            circleArray.splice(i, 1);
                            break;
                        }
                    }
                } else {
                    this.draw();
                }
            }

        }

        var circleArray = [];

        function initCanvas() {
            circleArray = [];
        }

        var colorArray = [
            '2,253,119',
            '253,250,2',
            '253,2,228',
            '246, 111, 106',
            '94 ,124 ,224'
        ]

        function drawCircles() {
            let radius = Math.floor(Math.random() * 4) + 2;
            let vx = (Math.random() * 2) - 1;
            let vy = (Math.random() * 2) - 1;
            let spawnFrame = frame;
            let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
            let life = 100;
            circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
        }

        var frame = 0;
        function animate() {
            requestAnimationFrame(animate);
            frame += 1;
            c.clearRect(0, 0, innerWidth, innerHeight);
            for (let i = 0; i < circleArray.length; i++) {
                circleArray[i].update();
            }

        }

        initCanvas();
        animate();
    </script>

鼠标跟随效果,放入页脚HTML代码中

    <style type="text/css">
        .line {
            position: absolute;
            cursor: default;
        }

        .lineS {
            font-size: 1px;
            opacity: 0;
            border-radius: 2.5px;
            position: absolute;
            transition: 1s;
            position: absolute;
    </style>

    <script>
        var container = $('body')[0]; //获取容器
        var divLeft = $(container).offset().left//获取容器距离左侧的距离
        var divTop = $(container).offset().top//获取容器距离上方的距离
        var timer;//定时器一，更改p的样式
        var timer2;//定时器二，回收生成的p
        //符号数组
        var shape = ['♥', '♫', '❤', '✿', '❉', '♣', '☀', '☺', '◐', '☑', '√', '×', '☒', '☹', '☾', '☀', '▂', '▃', '▅', '♫', '§', '❉', '¤', '۞', '℗', '❉', '®', '®', '✿', '✿', '☋', '✿']
        //将鼠标移动时间绑定到容器上
        $(container).mousemove(function (event) {
            event = event || window.event//赋值event
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;//获取当前导航栏距离左侧的距离
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;//获取导航栏距离上方的距离

            //获取到当前鼠标在容器中的位置
            var x = event.clientX + scrollX - divLeft;//鼠标x可视位置-导航栏x距离-容器距离左侧的位置
            var y = event.clientY + scrollY - divTop;//同上，x变y

            //生成红蓝绿随机颜色
            var red = parseInt(Math.random() * 257).toString(16);
            var blue = parseInt(Math.random() * 257).toString(16);
            var green = parseInt(Math.random() * 257).toString(16);
            var color = '#' + red + blue + green;
            //生成随机字体大小
            var size = (Math.random() * (30 - 1 + 1) + 1) + 'px'
            //随机符号
            var shapeInedx = parseInt(Math.random() * (shape.length - 1 - 0 + 1) + 0)
            //p标签，绑定文字
            var p = '<p class="line">' + shape[shapeInedx] + '</p>'
            //设置p标签随机出的颜色以及字体大小样式，设置p标签显示位置，并且插入到容器中
            $(container).append($(p).css({
                "color": color,
                "font-size": size
            }).offset({
                top: y,
                left: x
            }))

            //等待10毫秒后执行，防止还未生成就变换看不见的样式
            setTimeout(() => {
                timer = setInterval(vanish(), 1000)//每1s执行一次vanish方法，
            }, 10);
            //回收p机制，每1s执行一次防止还未显示就被回收
            setTimeout(() => {
                timer2 = setInterval(removeDom(), 3000)//每3s执行一次删除方法
            }, 1000);

        })

        //变换样式方法
        function vanish() {
            var pLine = $('.line')[0];//每次获取到第一个样式为初始的p元素
            $(pLine).removeClass('line')//删除样式
            $(pLine).addClass('lineS')//填入样式

            if (pLine == undefined) {//判断页面内还有没有初始样式的标签，如果没有，清除timer
                clearInterval(timer)
            }
        }

        //删除元素方法
        function removeDom() {
            var pLine = $('.lineS')[0];//获取第一个样式为改变后的p元素
            $(pLine).remove()//删除
        }
    </script>