JS，CSS，HTML制作網頁首頁，視頻輪播，隱藏點擊等等。

在整個項目中，總共寫了1000+的代碼，可以更加簡單優化的。整個主頁交互效果能基本，包括輪播，視頻，點擊變化形狀，移入蒙版，瀑布流加載滑動，旋轉等等。輪播導航沒有完全做完，暫時做了往右無限推動。個人覺得主要難點是在於對於JS的函數和應用，CSS熟悉了后，主要是重復性工作，JS涉及到一些計算反而比較困難。在整個代碼中都有詳細的注釋，有興趣的朋友可以看看。

項目下載地址:http://pan.baidu.com/s/1miaVde4

這里是實現點擊過后menu形狀 “三” 變成“Ⅹ”  

共設置了4個div（作為線條）  中間2個div重合 ，點擊時隱藏上下線條，同時中間的進行旋轉

CSS代碼：
/*第一條線和最后一條線設置定位*/ 

#menu div:nth-child(1) {
    top: 0px
}

#menu div:nth-child(4) {
    top: 16px
}

/*點擊menu后的隱藏菜單初始化定義*/

#Menu-Hidden {
    width: 1368px;
    background-color: #55F7D7;
    height: 667px;
    position: fixed;
    top: 0px;
    right: 1350px;
    z-index: 14;
    -webkit-transition: right 0.4s linear;
}

JS代碼：

var Menu = document.getElementById("menu");
Menu.onclick = function () {
    var Mhidden = document.getElementById("Menu-Hidden");
    var Mdiv = this.getElementsByTagName("div");
    //點擊時推動出來
    //根據判斷，menu是否點擊了，沒有點擊則是隱藏上線的div白色線條，中間進行旋轉
    if (Mdiv[0].style.opacity != "0") {
        Mdiv[0].style.opacity = 0;
        Mdiv[3].style.opacity = 0;
        Mdiv[2].style.webkitTransform = "rotate(45deg)";
        Mdiv[1].style.webkitTransform = "rotate(-45deg)";
        Mhidden.style.right = "0px";
        //禁用滾動條
        document.documentElement.style.overflowY = 'hidden';
    }
    //再點擊的時候，恢復初始化
    else {
        Mdiv[0].style.opacity = 1;
        Mdiv[3].style.opacity = 1;
        Mdiv[2].style.webkitTransform = "rotate(0deg)";
        Mdiv[1].style.webkitTransform = "rotate(0deg)";
        Mhidden.style.right = "1350px";
        //恢復滾動條
        document.documentElement.style.overflowY = 'auto';
    }
}

瀑布流初次加載的時候，進行一個上升滑動效果 在布局的時候，就可以把你所有的圖片往下移動一點，我這里是200px 然后主要是通過scrolltop控制的，通過這個屬性值來進行判斷，增加一個上升效果，核心JS分析就好。具體可以看源代碼的。

JS代碼：
var One = setInterval(Scrollevenlistener, 2);//2毫秒調用一次，反復判斷
function Scrollevenlistener() {
    var oDis = document.body.scrollTop;
    var line1 = [document.getElementById("LPc-1"), document.getElementById("Mpc-1"), document.getElementById("Rpc-1")];//獲取我第一排圖片的ID
    if (oDis >= 574) {
        for (var i = 0; i < line1.length; i++) {
            //parseInt無論是字符串還是數字，遇到第一個非數字時，取出前面所有的數字
            var NH = parseInt(document.defaultView.getComputedStyle(line1[i], null).top);
            line1[i].style.top = NH - 200 + "px";
　　　　　　　　//所有圖片上升，清楚這個函數
            if (i ==line1.length-1) {

                clearInterval(One);
            }
        }
    }
}