zoukankan      html  css  js  c++  java
  • 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 {
    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);
    }
    }
    }
    }


  • 相关阅读:
    Unique Binary Search Trees 解答
    Unique Paths II 解答
    Unique Paths 解答
    Maximum Subarray 解答
    Climbing Stairs 解答
    House Robber II 解答
    House Robber 解答
    Valid Palindrome 解答
    Container With Most Water 解答
    Remove Duplicates from Sorted List II 解答
  • 原文地址:https://www.cnblogs.com/leolovexx/p/5485176.html
Copyright © 2011-2022 走看看