master

分支 (1)

管理

管理

master

mobile_banner
/
h5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Title</title>
    <style>
        html{overflow:hidden;}
        #container a{display:block;position:absolute;color: #f8fffd;width:100%;font-size:0px;top:0px;}
        #container a img{width:100%;}
        #container a p{position:absolute; transform:translateY(30px); transition:all .8s; left: 20%; text-align:center;font-size:16px; width: 60%;}
        #container a p.active{transition:all .8s; transform:translateY(200px);}
        #container a h1{position:absolute;bottom:80px;left: 20%; text-align:center;font-size:28px; width: 60%; transform: scale(0, 0); transition:all 1.2s;}
        #container a h1.active{transition:all 1.2s;  transform: scale(1, 1);}
        #container .ant{transition:all 0.2s ease-in-out;}
    </style>
</head>
<body>


<div id="container">

    <a href="javascript:" style="z-index:0">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/1.png" />
    </a>

    <a href="javascript:" style="z-index:1">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/2.png" />
    </a>

    <a href="javascript:" style="z-index:2">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/3.png" />
    </a>

    <a href="javascript:" style="z-index:3">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/4.png" />
    </a>

    <a href="javascript:" style="z-index:4">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/5.png" />
    </a>

    <a href="javascript:" style="z-index:5">
        <img src="img/6.png" />
    </a>

</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
    var height = (801 * $(window).width()) / 751;   //图片在width:100%的情况下占浏览器的高度
    var display_height = height/4;  //图片在抽屉里的高度
    var currentIndex = 0;   //默认当前是第一张
    var dir = "up";     //当前滑动的方向up， 向下down
    // var dirs = "up";
    var step = 1;   //当前滑动的步数，默认一张
    var move_Height = 0;    //手指滑动的高度

    function move_event(_y, moveHeight) {
        $("#container a").each(function (i) {
            if (currentIndex == i) {
                $(this).css("transform", "translateY("+_y+"px)");   //当前置顶的图片随滑动增量偏移
                $(this).find("h1, p").addClass("active");
            } else if (currentIndex + 1 == i) {
                if (dir == "up")
                    $(this).css("transform", "translateY("+(height + _y)+"px)");
                else
                    $(this).css("transform", "translateY("+(height + moveHeight)+"px)");    //向下滑动的最大偏移量为height/4
                $(this).find("h1, p").removeClass("active");
            } else if (i < currentIndex) {
                $(this).css("transform", "translateY("+(- height * (currentIndex - i) + _y)+"px)");
                $(this).find("h1, p").removeClass("active");
            } else if (i > currentIndex) {
                if(currentIndex+2==i && Math.abs(_y) > height && dir=="up")
                    $(this).css("transform", "translateY("+(height + display_height * (i - currentIndex - 1) + moveHeight*1.5)+"px)");
                else
                    $(this).css("transform", "translateY("+(height + display_height * (i - currentIndex - 1) + moveHeight)+"px)");
                $(this).find("h1, p").removeClass("active");
            }
        });
    }

    move_event(0, 0);

    var startY = 0;
    //手指接触屏幕的时候触发
    function touchStart(event) {
        event.preventDefault();
        var touchEvent = event.touches[0];
        startY = touchEvent.pageY;
        step = Math.ceil((startY - height)/display_height);
        if(step >= 1){
            step = getStep(step);
        }else{
            step = 0;
        }
        $("#container a").removeClass("ant");
    }

    function getStep(step) {
        if(currentIndex + step <= $("#container a").length-1) return step;
        return getStep(step-1);
    }

    document.addEventListener("touchstart", touchStart, true);

    //初始化，手指在屏幕滑动时实时触发
    function touchMove(event) {
        var touchEvent = event.touches[0];
        var moveY = touchEvent.pageY - startY;
        if(moveY >= 0){
            move_Height = (Math.abs(moveY)>display_height?display_height:moveY);
        }else{
            move_Height = (Math.abs(moveY)>display_height?display_height*(-1):moveY);
            if(Math.abs(moveY) > height){
                move_Height -= (Math.abs(moveY) - height);
            }
        }
        move_event(moveY, move_Height);
        if (moveY < -50){
            dir = "up";
        }else if(moveY > 50){
            dir = "down";
        }

        /*if (moveY < 0)
            dirs = "up";
        else
            dirs = "down";*/
    }

    document.addEventListener("touchmove", touchMove, true);

    var endY = 0
    //手指接触屏幕的时候触发
    function touchEnd(event) {
        event.preventDefault();
        var touchEvent = event.changedTouches[0];
        var $aLen = $("#container a").length;
        endY = touchEvent.pageY;
        console.log(startY-endY);
        if(step==0 && startY-endY>50){
            step = 1;
        }else if(step==0 && Math.abs(startY-endY)<1){
            console.log("当前是点击事件！");
        }
        if ((dir == "up" || startY-endY >= 0) && currentIndex < $aLen-1){
            if(startY-endY < 1) currentIndex += step;
            else if(startY-endY > 50 && startY-endY <= height) currentIndex++;
            else if(startY-endY > height) {currentIndex += 2; if(currentIndex >= $aLen-1) currentIndex = $aLen-1;};
        }else if (dir == "down" && currentIndex>0){
            if(endY-startY > 20){
                currentIndex--;
            }
        }
        $("#container a").addClass("ant");
        move_event(0, 0, true)
    }

    document.addEventListener("touchend", touchEnd, true);
</script>
</body>
</html>