master

分支 (2)

管理

管理

master

F

vtmer-collections
/
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
                <title>
                    首页
                </title>
                <link href="./css/homepage.css" rel="stylesheet">
                </link>
                <link rel="stylesheet" type="text/css" href="./css/bg.css">
                <link rel="icon" href="./img/vtmerLogin.ico" type="image/x-icon"/>
            </meta>
        </meta>
    </head>
    <body>
        <div class="homeContent">
            <div id="header">
                <img alt="LOGO" class="LOGO" src="img/LOGO.png"/>
                <a class="content-login" href="#">
                    <img alt="login" id="loginBtn" src="./img/home/BTN-LOG1.png"/>
                </a>
            </div>
            <div class="content-center">
                <img alt="bigVtmLogo" src="./img/home/SLOGAN.png"/>
                <div class="content-BTNlogin">
                    <a href="./worker.html" id="openBtn">
                        打开作品
                    </a>
                </div>
                <div class="content-BTNsignup">
                    <a href="./apply.html" id="signupBtn">
                        加入我们
                    </a>
                </div>
            </div>
        </div>
        <div class="BgContain">
            <ul class="scene" id="S1" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg1'><img src="img/bg1.png"></li>
            </ul>
            <ul class="scene" id="S2" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg2'><img src="img/bg7.png"></li>
            </ul>
            <ul class="scene" id="S3" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.40" id='bg3'><img src="img/bg3.png"></li>
            </ul>
            <ul class="scene" id="S4" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg6.png"></li>
            </ul>
            <ul class="scene" id="S5" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg4.png"></li>
            </ul>
            <ul class="scene" id="S6" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg9.png"></li>
            </ul>
            <ul class="scene" id="S7" data-scalar-x="28" data-scalar-y="28">
                 <li class="layer" data-depth="1.00" id='bg7'><img src="img/bg11.png"></li>
            </ul>
            <ul class="scene" id="S8" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg10.png"></li>
            </ul>
            <ul class="scene" id="S9" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg8.png"></li>
            </ul>
            <ul class="scene" id="S10" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg2.png"></li>
            </ul>
            <ul class="scene" id="S11" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg12.png"></li>
            </ul>
            <ul class="scene" id="S12" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg5.png"></li>
            </ul>
        </div>


        <script src="./js/flexible.debug.js">
        </script>
        <script src="./js/jq.min.js">
        </script>
        <script src="./js/home/homepage.js">
        </script>
        <script src="./js/home/homepageLogin.js">
        </script>
        <script src='./js/jquery.parallax.min.js'></script>

    <script>
        /** * 禁止浏览器下拉回弹 */
        (function stopDrop() {
            var lastY;
            //最后一次y坐标点
            $(document.body).on('touchstart', function (event) {
                lastY = event.originalEvent.changedTouches[0].clientY;
                //点击屏幕时记录最后一次Y度坐标。
            });
            $(document.body).on('touchmove', function (event) {
                var y = event.originalEvent.changedTouches[0].clientY;
                var st = $(this).scrollTop();
                //滚动条高度
                if (y >= lastY && st <= 10) {
                    //如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。
                    lastY = y; event.preventDefault();
                } lastY = y;
            });
            $('.scene').parallax();
        })()
        </script>
    </body>
</html>