master

分支 (1)

管理

管理

master

mobile_banner
/
video.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{overflow:hidden; display:block;position:absolute;color: #f8fffd;width:100%;font-size:0px;top:0px;}
        #container a img{width:100%; overflow: hidden;}
        #container a video{display: none;}
        #container a video.active{display: block;}
        .video:before{display: block; content: ''; width: 50px; height: 50px; background: url("img/play.png") no-repeat; background-size: 100%; position: absolute; left: 45%; top: 45%; z-index: 9}
        #container a p{position:absolute; transform:translateY(30px); transition:all .8s; left: 20%; text-align:center;font-size:16px; width: 60%; z-index: 10}
        #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; z-index: 10}
        #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:" data-index="0" style="z-index:0; clear: both">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/1.png" />
        <!--<video src="img/video.mp4" controls="controls"></video>-->
    </a>

    <a href="javascript:" data-index="1" style="z-index:1">
        <p>发布会</p>
        <h1>3D随心定制</h1>
        <img src="img/2.png" />
        <div class="video">
            <!--<video src="//wq.360buyimg.com/data/ppms/movie/justice_league_trailer_2_h480p_2.mp4" preload x5-playsinline  playsinline  webkit-playsinline="true" controls="controls"></video>-->
            <video src="//wq.360buyimg.com/data/ppms/movie/justice_league_trailer_2_h480p_2.mp4" controls="controls"></video>
        </div>
    </a>

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

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

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

    <a href="javascript:" data-index="5" 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;
    var currentIndex = 0;
    var dir = "up";
    var dirs = "up";
    var step = 1;
    var move_Height = 0;

    function move_event(_y, moveHeight, _end) {
        $("#container a").each(function (i) {
            if (currentIndex == i) {
                $(this).css("transform", "translateY("+(_end ? 0 : _y)+"px)");
                $(this).find("h1, p").addClass("active");
            } else if (currentIndex + 1 == i) {
                if (dirs == "up")
                    $(this).css("transform", "translateY("+(_end ? height : height + _y)+"px)");
                else
                    $(this).css("transform", "translateY("+(_end ? height : height + moveHeight)+"px)");
                $(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 + (height / 4) * (i - currentIndex - 1) + moveHeight*1.5)+"px)");
                else
                    $(this).css("transform", "translateY("+(height + (height / 4) * (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)/(height/4));
        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;
        // console.log(moveY);
        if(moveY >= 0){
            move_Height = (Math.abs(moveY)>(height/4)?(height/4):moveY);
        }else{
            move_Height = (Math.abs(moveY)>(height/4)?(height/4)*(-1):moveY);
            if(Math.abs(moveY) > height){
                move_Height -= (Math.abs(moveY) - height);
            }
        }
        move_event(moveY, move_Height);
        if (moveY < -50)
            dir = "up";
        else
            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;
        if(step==0 && startY-endY>5){
            step = 1;
        }else if(step==0 && Math.abs(startY-endY)<1){
            var $video = $('a[data-index='+currentIndex+']').find('video');
            if($video.length == 0){
                console.log("当前是点击事件！");
            }else{
                // $video.addClass("active");
                var $vObject = $video[0];
                $vObject.play();
            }
        }
        if ((dir == "up" || startY-endY >= 0) && currentIndex < $aLen-1){
            if(startY-endY < 1) currentIndex += step;
            else if(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>