JavaScript（三十八）——动画练习，触屏事件

上一篇博客动画练习

触屏事件

上一篇博客动画练习

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/style2.css"/>
    <body>
        <div class="contain">
            <div class="box">
                <div class="clock"></div>
                <p>clock</p>
            </div>
            <div class="box">
                <div class="hourglass"></div>
                <p>hourglass</p>
            </div>
            <div class="box">
                <div class="loader1"></div>
                <p>loader1</p>
            </div>
            <div class="box">
                <div class="loader2"></div>
                <p>loader2</p>
            </div>
            <div class="box">
                <div class="loader3"></div>
                <p>loader3</p>
            </div>
            <div class="box">
                <div class="loader4"></div>
                <p>loader4</p>
            </div>        
        </div>
    </body>
</html>

CSS


.contain{
    text-align: center;
    background-color: #e74c3c;
    overflow: hidden;
}

.box:nth-child(2n-1){
    background-color: rgba(0,0,0,0.05);
}

.box{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    float: left;
    position: relative;
    transition: all .2s ease;
}

.box p{
    color: #777;
    font-weight: 300;
    position: absolute;
    font-size: 20px;
    width: 100%;
    height: 25px;
    text-align: center;
    bottom: 0px;
    margin: 0;
    top: 160px;
    background-color: #fff;
    opacity: 0;
    text-transform: uppercase;
    transition: all .2s ease;
}

.box:hover p{
    bottom: 0px;
    top: 175px;
    opacity: 1;
    transition: all .2s ease;
    z-index: 2;
}

/* media queries 媒体查询：当屏幕小于某一个值时会改变排数*/
@media (max-width: 700px){
    .box{
        width: 50%;
    }
    .box:nth-child(2n-1){
        background-color: inherit;
    }
    .box:nth-child(4n),.box:nth-child(4n-3){
        background-color: rgba(0,0,0,0.05);
    }
}

@media (max-width:420px){
    .box{
        width: 100%;
    }
    .box:nth-child(2n-1){
        background-color: rgba(0,0,0,0.05);
    }
    .box:nth-child(4n),.box:nth-child(4n-3){
        background-color: inherit;
    }
}

/*clock*/
.clock{
    border-radius: 60px;
    border: 3px solid #fff;
    height: 80px;
    width: 80px;
    position: relative;

    /*top: 20%;*/
    top: -webkit-calc(50% - 43px);
    top: calc(50% - 43px);
    /*left: 35%;*/
    left: -webkit-calc(50% - 43px);
    left: calc(50% - 43px);
}
.clock:after{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 2px;
    left: 48%;
    height: 38px;
    width: 4px;
    border-radius: 5px;
    /*-webkit-transform-origin: 50% 97%;*/
    transform-origin: 50% 97%;
    animation: grdAiguille 2s linear infinite;
}
@keyframes grdAiguille{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.clock:before{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 6px;
    left: 48%;
    height: 35px;
    width: 4px;
    border-radius: 5px;
    /*-webkit-transform-origin: 50% 97%;*/
    transform-origin: 50% 94%;
    animation: ptAiguille 12s linear infinite;
}
@keyframes ptAiguille{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/*    hourglass       */
.hourglass{
    border-radius: 80px;
    border: 3px solid #fff;
    height: 80px;
    width: 80px;
    position: relative;

    top: calc(50% - 43px);
    left: calc(50% - 43px);
    transform-origin: 50% 50%;
    animation: hourglass 2s linear infinite;
}
.hourglass:before{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 6px;
    left: 18px;
    height: 0px;
    width: 0px;
    border-style: solid;
    border-width:35px 22px 0 22px;
    border-color: #fff #e74c3c; 
}
.hourglass:after{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 40px;
    left: 18px;
    height: 0px;
    width: 0px;
    border-style: solid;
    border-width:0 22px 35px 22px;
    border-color: #fff #e74c3c; 
}
@keyframes hourglass{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/*loader1*/
.loader1{
    position: relative;
    width: 150px;
    height: 20px;
    top: calc(50%-10px);
    left: calc(50%-75px);
    margin: 90px auto;

    background-color: rgba(255,255,255,0.2);
}
.loader1:before{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 0px;
    left: 0px;
    height: 20px;
    width: 0px;
    z-index: 0;
    opacity: 1;
    transform: 100% 0%;
    animation: loader1 6s ease-in-out infinite;
}
.loader1:after{
    content: "LOADING......";
    color: #fff;
    font-weight: 200;
    font-size: 16px;
    position: absolute;
    width: 100%;
    height: 20px;
    line-height: 20px;
    left: 0;
    top: 0;
}
@keyframes loader1{
    0%{width: 0px;}
    85%{width: 100%;opacity: 1;}
    90%{opacity: 1;width: 100%;}
    100%{opacity: 0;width: 0px;}
}

/*loader2*/
.loader2{
    position: relative;
    width: 40px;
    height: 40px;
    top: calc(50%-20px);
    left: calc(50%-20px);
    margin: 90px auto;

    background-color: rgba(255,255,255,0.2);
}
.loader2:before{
    content: "";
    position: absolute;
    background-color: #fff;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    animation: loader2 2s ease-in-out infinite;
}
.loader2:after{
    content: "";
    position: absolute;
    background-color: #fff;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 40px;
    z-index: 0;
    opacity: 1;
    animation: loader22 5s ease-in-out infinite;
}
@keyframes loader2{
    0%{left: -12px;top: -12px;}
    25%{left: 42px;top: -12px;}
    50%{left: 42px;top: 42px;}
    75%{left: -12px;top: 42px;}
    100%{left: -12px;top: -12px;}
}
@keyframes loader22{
    0%{width: 0px;}
    80%{width: 100%;opacity: 1;}
    90%{opacity: 1;width: 100%;}
    100%{opacity: 0;width: 0px;}
}

运行结果：

触屏事件

什么是触屏事件：

手指在屏幕上滑动带来的一些效果
方便我们的操作
指尖上的行动

分类以及触发的时机

touchstart事件:当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发

跟踪触屏的特性

touches :表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自，上次触摸以来发生了什么改变的Touch对象的数组。

Touch对象属性

clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一-ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。

分类以及触发时机

touchstart事件:当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。

例子：将页面切换成手机模式，点击在控制台打印事件

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>    
    <body>
        <div id="box"></div>

        <script type="text/javascript">
            var box = document.getElementById("box")

            box.addEventListener("touchstart",function(e){
                console.log(e)
            })

            document.addEventListener("touchend",function(){
                console.log("点击产生屏幕")
            })
        </script>
    </body>
</html>

CSS：

*{
    padding: 0;
    margin: 0;
}

#box{
    width: 200px;
    height: 200px;
    background-color: red;
}

运行结果：

一起学习，一起进步 -.- ，如有错误，可以发评论