h5样式-html js css

最新推荐文章于 2024-07-22 17:27:18 发布
qiaokelizhuzhu
最新推荐文章于 2024-07-22 17:27:18 发布
阅读量116
点赞数
文章标签： jquery html5
本文链接：https://blog.csdn.net/qiaokelizhuzhu/article/details/132061695
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/product.css">
</head>
<body>
    <style>
        @charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page{ }
.page{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
 
/*==================================*/
 
.page.inTop{
            -webkit-animation:ShowTop .5s ease-out both;
					animation:ShowTop .5s ease-out both;
}
.page.outTop{
            -webkit-animation:HideTop .5s ease-out both;
					animation:HideTop .5s ease-out both;
}
.page.inDown{
            -webkit-animation:ShowDown .5s ease-out both;
					animation:ShowDown .5s ease-out both;
}
.page.outDown{
            -webkit-animation:HideDown .5s ease-out both;
					animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
	0%{ -webkit-transform:translateY(100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
	0%{ transform:translateY(100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
	0%{ -webkit-transform:translateY(-100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
	0%{ transform:translateY(-100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(100%);}
}
 
/*==================================*/
 
.arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#d00; position:absolute; left:285px; bottom:10px;
			-webkit-animation:arrow 1.2s .5s ease-in-out infinite;
					animation:arrow 1.2s .5s ease-in-out infinite;
}
@-webkit-keyframes arrow{
	0%{ -webkit-transform:translateY(0); opacity:1;}
	100%{ -webkit-transform:translateY(-50%); opacity:0}
}
@keyframes arrow{
	0%{ transform:translateY(0); opacity:1;}
	100%{ transform:translateY(-50%); opacity:0}
}
 
 
/*==================================*/
 
.page > div > div:nth-child(1){
	-webkit-animation:fadeRightTan .8s .2s ease-in-out both;
			animation:fadeRightTan .8s .2s ease-in-out both;
}
.page > div > div:nth-child(2){
	-webkit-animation:fadeRightTan .8s .7s ease-in-out both;
			animation:fadeRightTan .8s .7s ease-in-out both;
}
.page > div > div:nth-child(3){
	-webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;
			animation:fadeRightTan .8s 1.2s ease-in-out both;
}
.page > div > div:nth-child(4){
	-webkit-animation:fadeRightTan .8s 1.7s ease-in-out both;
			animation:fadeRightTan .8s 1.7s ease-in-out both;
}
.page > div > div:nth-child(5){
	-webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;
			animation:fadeRightTan .8s 2.2s ease-in-out both;
}
.page > div > div:nth-child(6){
	-webkit-animation:fadeRightTan .8s 2.7s ease-in-out both;
			animation:fadeRightTan .8s 2.7s ease-in-out both;
}
.page > div > div:nth-child(7){
	-webkit-animation:fadeRightTan .8s 3.2s ease-in-out both;
			animation:fadeRightTan .8s 3.2s ease-in-out both;
}
.page > div > div:nth-child(8){
	-webkit-animation:fadeRightTan .8s 4.7s ease-in-out both;
			animation:fadeRightTan .8s 4.7s ease-in-out both;
}
.page > div > div:nth-child(9){
	-webkit-animation:fadeRightTan .8s 5.2s ease-in-out both;
			animation:fadeRightTan .8s 5.2s ease-in-out both;
}
.page > div > div:nth-child(10){
	-webkit-animation:fadeRightTan .8s 5.7s ease-in-out both;
			animation:fadeRightTan .8s 5.7s ease-in-out both;
}
@-webkit-keyframes fadeRightTan{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	90%{ -webkit-transform:translateX(-2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightTan{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	90%{ transform:translateX(-2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}

    </style>
    <div class="page_box" id="videoScorll">
        <div class="page page1">
            <div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
                <div>11111111111</div>
            </div>
        </div>
    
        <div class="page page2 hide">
            <div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
                <div>22222222222</div>
            </div>
        </div>
    
        <div class="page page3 hide">
            <div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
                <div>33333333333</div>
            </div>
        </div>
    
        <div class="page page4 hide">
            <div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
                <div>44444444444</div>
            </div>
        </div>
    
        <div class="page page5 hide">
            <div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
                <div>55555555555</div>
            </div>
        </div>
    
        <div class="page page6 hide">
            <div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
                <div>66666666666</div>
            </div>
        </div>
    </div>
    
    <div class="arrow">∧</div>
    
    <script src="./js/jquery.min.js"></script>
    <script>
          //$('.page').height($(window).height());

  document.getElementById("videoScorll").addEventListener("touchmove", function(e){
    e.preventDefault();
} , false);

var curPage = 1;
var PageL = $('.page_box .page').length;
var canTouch = false;
canTouch = true;

var startY , endY , diff;
document.getElementById("videoScorll").addEventListener("touchstart", touchStart, false);
document.getElementById("videoScorll").addEventListener("touchmove", touchMove, false);
document.getElementById("videoScorll").addEventListener("touchend", touchEnd, false);
function touchStart(e){
    var touch = e.touches[0];
    startY = touch.pageY;
}
function touchMove(e){
    //e.preventDefault();
    var touch = e.touches[0];
    endY = touch.pageY;
    diff = endY - startY;
}
function touchEnd(e){
    if(Math.abs(diff) > 150 && canTouch){
        if(diff > 0){
            if(curPage <= 1){
                return;
            }

            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
            curPage--;
            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');

        }else{
            if(curPage >= PageL){
                return;
            }

            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
            curPage++;
            $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');

            if(curPage >= PageL){
                $('.arrow').hide();
            }else{
                $('.arrow').show();
            }
        }
        canTouch = false;
        // 1s后切换页面
        setTimeout(function(){
            canTouch = true;
            diff = 0;
            $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
        },1000);
    }
}
    </script>
</body>
</html>