博客美化-主页及博客美化

#前言

最近有点时间，然后又突然发现博客园竟然可以自定义首页，对于自己这样穷苦的码农十分友好，所以兴致大发，搜索了网上各位能人异士的改造方案，最终发现 @夏日浅笑这位兄台的首页很棒，决定按照他的步骤改造一番，他推荐的大神的链接我打不开，兄弟们有兴趣的可以去看看。

附下这位兄台文章的跳转：

https://www.cnblogs.com/summertime-wu/p/9356736.html 博客园美化

一段时间之后，又发现很多很多优秀的总结，好像都是年轻的小朋友们的，附上他们的链接（不分先后，按搜索到的顺序排列）：

YJLAugus

#自己探索

下面记录下自己按照文章美化的步骤（未完）：

1.整体背景

整体是用的夏日的背景，把里面的js单独拉出来压缩了一下，上传到博客园的文件，然后引用。

(页首上方的logo，地址：https://www.logoko.com.cn/)

2.因为我在博客园配置里把选项里的都取消掉了，只留下公告栏，所以点击关注的时的按钮就失效了，修改下页尾html里的点击事件。

            <span class="bottom-bar-item bottom-bar-facebook">
                <a id="bottom-d" href="javascript:void(0)" onclick="DiggIt(cb_entryId ,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要赞</a>
            </span>
            <span class="bottom-bar-item bottom-bar-twitter">
                <a id="bottom-g" href="javascript:void(0)" onclick="follow(cb_blogUserGuid);">关注我</a>
            </span>
            <span class="bottom-bar-item bottom-bar-qrcode">
                <a id="bottom-s" href="javascript:void(0)" onclick="AddToWz(cb_entryId);return false;">收藏该文</a>
            </span>

3.各种特效

-- 点击出现爱心慢慢消失特效

<!-- 爱心特效 -->
<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{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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>

View Code

--雪花飘飘

<script type="text/javascript">
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
    documentHeight     = $(document).height(),
    documentWidth    = $(document).width(),
    defaults = {
        minSize        : 5,
        maxSize        : 25,
        newOn        : 500,
        flakeColor    : getRandomColor() /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
    },
    options    = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: getRandomColor()
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 200  /* 定义密集程度，数字越小越密集 */
    });
});
var getRandomColor = function(){
  return '#'+Math.floor(Math.random()*16777215).toString(16); 
}
</script>

View Code