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

JS，CSS，HTML制作网页首页，视频轮播，隐藏点击等等。

标签：

原文地址：http://www.cnblogs.com/leolovexx/p/5485176.html