制作在線簡歷（一）——Loading與底部菜單

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

不過我的配色low了點，還望見諒......

一、首頁Loading效果

這次就打算把幾個功能全部寫在一起展示啦，這樣就得有個Loading頁面，先把該載入的都載入進來。不然的話，代碼沒載入進來，這效果都看不到的，體驗會很差。

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

 

1、選了個我感覺比較酷的Loading樣式：

 

2、然后想來個背景色，全屏的那種，我用了個position絕對定位來做。

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

 

 

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

這里涉及到了多層陰影，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;
}

 

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

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

我以前也做過一些CSS3動畫的記錄，可以在《CSS3中的動畫效果記錄》查看到。

二、底部菜單欄

1、以往的菜單欄布局不是用float就是用display:inline，這次我想試試用flex布局，可以快速的布局在一列，下圖是部分菜單

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

 

2、接着我想在選中的那欄加一個三角形，以前寫小三角非常復雜，有的方法是多寫一個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;
}

 

3、添加選中特效，本來使用的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