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

空城机
284 阅读5分钟

目录

上一篇博客动画练习

触屏事件

什么是触屏事件：

分类以及触发的时机

跟踪触屏的特性

Touch对象属性

分类以及触发时机

上一篇博客动画练习

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;
}

运行结果：

 

 

 

 

 

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

avatar
文章
阅读
粉丝