製做在線簡歷（一）——Loading與底部菜單

想裝逼下搞個在線簡歷，而後順便用些CSS3與HTML5的一些技術，再順帶把響應式也加上去去，在移動端也能看到。

不過個人配色low了點，還望見諒......

1、首頁Loading效果

此次就打算把幾個功能所有寫在一塊兒展現啦，這樣就得有個Loading頁面，先把該載入的都載入進來。否則的話，代碼沒載入進來，這效果都看不到的，體驗會不好。

前面寫過一篇製做Loading效果的文章《多種方法實現Loading（加載）動畫效果》，此次挑Sonic.js來實現下。

 

一、選了個我感受比較酷的Loading樣式：

 

二、而後想來個背景色，全屏的那種，我用了個position絕對定位來作。

.loading{
    background:#00BFF3;
    height:100%;
    text-align:center;
    position: absolute;
    top: 0;
    width: 100%;
}

 

 

三、在屏幕中間加個框，裏面再加點陰影進來，暫時先把底色去掉

這裏涉及到了多層陰影，box-shadow中有多個陰影設置，能夠在線調試陰影效果，第一個能夠作多層調試。

也能夠在這裏調試，不過就是第二個那裏調試的話不能作出多層的效果。

.loading .shadow{
    margin: 100px auto 0;
    background: #fff;
    width: 70%;
    padding: 20px 0;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
          -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
           -ms-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
}

接下來我想在底部與兩邊作點陰影加深操做，這裏會使用到僞類:after,:before。z-index是讓兩個僞類的效果被蓋在下面，而top、bottom等是爲了控制陰影的位置，若是將z-index的值加大點就會看到兩個僞類的效果是一個長方形。這裏爲了能將陰影顯示出來，我得修改下.loading的樣式，添加z-index屬性，修改背景顏色其餘屬性不變。

.loading .shadow:before, .loading .shadow:after{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -ms-box-shadow::0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10%;
    bottom:0;
    left:10px;
    right:10px;
}

.loading{
    background:#F6FFD1;
    z-index:-2;
}

 

四、添加一個隱藏loading頁面的腳本，loading頁面在DOM綁定，圖片載入後就不須要顯示了。

window.onload = function() {
    //隱藏loading頁面
    $('#loading_container').animate({translateY:'-100%'}, 1000,'linear');
};

我之前也作過一些CSS3動畫的記錄，能夠在《CSS3中的動畫效果記錄》查看到。

2、底部菜單欄

一、以往的菜單欄佈局不是用float就是用display:inline，此次我想試試用flex佈局，能夠快速的佈局在一列，下圖是部分菜單

.nav_container .flex{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}

 

二、接着我想在選中的那欄加一個三角形，之前寫小三角很是複雜，有的方法是多寫一個div而後絕對定位，或者是用圖片等。如今有了after僞類，能夠很方便的作三角形效果，注意下面的border，而後只要修改border-bottom-color就能夠改變三角形的方向。

.nav_container .flex > a.cur:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 1.2em;
    left: 50%;
    margin-left: -1.2rem;
}

 

三、添加選中特效，原本使用的click，可是在手機上面使用click是有300ms延時的。有多種解決方案，有一種是用插件fastclick，來解決那300ms延時，可是我這裏都已經引用了zepto中的touch文件，因此就不想再引入額外的腳本。

我就用一串正則來判斷是不是手機訪問，是的話就用tap事件，不是的話就用click。這串正則的健壯性還不得而知，是在網上看到的，點擊能夠查看。

var event = 'click';
// device detection
if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) {
        event = 'tap';
}
$('#nav').delegate('a', event, function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        var row = $(this).index();
        $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'ease-in-out', function() {
            if(row != 3) return;
            
            $.each(pieids, function(index, item) {
                if(pies.length <= index) {
                    var pie = draw_pie(piedatas[index], item);
                    pies.push(pie);
                }
            });
        });
        return false;
});

 

源碼下載：

http://download.csdn.net/detail/loneleaf1/8849069