移动端touch拖拽，拖动，改变animate动画事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1,user-scalable=no,width=device-width,initial-scale=1"/>
<title>拖拽</title>
</head>
<style>

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul,li{
list-style: none;
}
.warpe{
width: 100%;
height: 100%;
}
.img{
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}.img>ul{
width: 40%;
height: 40%;
position: relative;
border: 1px solid #0099FF;
transform-style: preserve-3d;
perspective: 200px;
}.img>ul>li{
text-align: center;
width: 100%;
height: 100%;
position: absolute;
font-size:100px;
font-weight: 900;
opacity: 0;
}
.imgopcity{
	opacity: 1 !important;
}
@keyframes myout
{
0%{opacity: 0;}
30%{opacity: 0.1;}
80%{opacity: 0.7;}
100%{opacity: 1;}
}
@keyframes myouta
{
0%{}
100%{opacity: 0;}
}
.img>ul>li:nth-of-type(1){
color: #008000;
}
.img>ul>li:nth-of-type(2){
color: #FF664D;
}
.img>ul>li:nth-of-type(3){
color: #4563BC;
}
.img>ul>li>p{
	text-shadow:2px 1px 25px cyan;
}
.tuo{
width: 100%;
height: 50%;
}.tuo>ul{
    width: 100%;
    height: 100%;
}.tuo>ul>li{
	width: 100%;
    height: 100%;
 color: #fff;
 position: relative;
}.tuo>ul>li>span{
	width: 20%;
    height: 20%;
	display: block;
	position: absolute;
	z-index: 1;
	text-align: center;
}
.tuoblock{
display: block !important;
}
.tuo>ul>li .otuoone{
/*background: #008000;*/
top: 0%;
left: 10%;
z-index: 9 !important;
}
.tuo>ul>li .otuotow{
/*background: #FF664D;*/
top: 0%;
left: 40%;
z-index: 9 !important;
}
.tuo>ul>li .otuothree{
/*background: #4563BC;*/
top: 0%;
left: 70%;
z-index: 9 !important;
}
.tuo>ul .otuo{
	z-index: 99;
	transform: rotateZ(0deg);
	/*animation-duration:5s;
   -webkit-animation-duration:5s; */
}
@keyframes mymove
{
from {transform: rotateZ(0deg);}
to {transform: rotateZ(45deg);}
}
@keyframes mymovea
{
from {transform: rotateZ(45deg);}
to {transform: rotateZ(0deg);}
}

</style>
<body>
<div class="warpe">
<div class="img">
<ul>
	<li class="imgli">
		<p >体</p>
	</li>
	<li class="imgli">
		<p >字</p>
	</li>
	<li class="imgli">
		<p >文</p>
	</li>
</ul>
</div>
<div class="tuo">
<ul>
	<li>
		<span class="otuoone"><img src="img/yanliao.png" style="width: 100%;height: 100%;"/></span>
		<span class="otuoone otuo"><img src="img/yanliao.png" style="width: 100%;height: 100%;"/></span>
	
		<span class="otuotow"><img src="img/yanliao.png" style="width: 100%;height: 100%;"/></span>
		<span class="otuotow otuo"><img src="img/yanliao.png" style="width: 100%;height: 100%;"/></span>
	
		<span class="otuothree"><img src="img/yanliao.png" style="width: 100%;height: 100%;"/></span>
		<span class="otuothree otuo"><img src="img/yanliao.png" style="width: 100%;height: 100%;"/></span>
	</li>
</ul>
</div>
</div>
<script>
	
var oImag = document.getElementsByClassName("img")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
var oTuo = document.getElementsByClassName("otuo");
//console.log(oTuo)
oImag[0].className = "imgopcity";
for(var i = 0;i < oTuo.length; i++)
{
//console.log(oTuo[i].classLis) 	
//手指触摸开始， 记录的初始位置
oTuo[i].addEventListener("touchstart",function(evt)
{    
	
    //手指触摸开始的时候改变样式
	this.style.cssText = "width:25% !important;height:25% !important";
	    console.log('开始')
	    	var e = window.event || evt;
	    	//手指触摸初始位置
	    	var touch = e.targetTouches[0];
	    	//手指触摸点
	 oL = touch.pageX - this.offsetLeft;
	 oT = touch.pageY - this.offsetTop;

   //阻止默认事件
            e.preventDefault();
})
oTuo[i].index = i;
//拖动中的，位置记录
oTuo[i].addEventListener("touchmove",function(evt)
{         // console.log(this.index);
		            //var _this = this.index;
	            	var e = window.event || evt;
	            	//手指拖动位置
	            	var touch = e.targetTouches[0];
	            	     //手指拖动位置    -  手指触摸开始
	            	var oLeft = touch.pageX - oL;
	                var oTop = touch.pageY - oT;
		            //   console.log(oTop);
	            	 //阻止默认事件
	           	e.preventDefault();
	           	var x=true;
	  //到达中间区域显示图
	if(oTop > -255 && oTop < -160 && oLeft > 90 && oLeft < 200){
		//console.log(oLeft)
	   this.style.cssText = "animation: mymove 0.5s linear 1 alternate;transform:rotateZ(45deg)";
	   
	 	   for (var j = 0; j < oImag.length; j++){
	 	   //	console.log(oImag[this.index])
				 	  if(oImag[j]!=oImag[this.index]){
					     oImag[j].className = "";
					     oImag[j].style.cssText = "";
					     
					   }
				 	//  oImag[j].className ="imgopcity";
                      // oImag[j].style.cssText = "";   
            };
         oImag[this.index].style.cssText = "animation: myout 1s linear 0.6s 1 normal;";
     //  oImag[this.index].setAttribute("class","imgopcity");
	     oImag[this.index].addEventListener("webkitAnimationStart", function(){ //动画开始时事件
			//console.log("动画开始");//动画结束时，控制台输出1
			   console.log("动画开始")
			    
			}, false);
   		oImag[this.index].addEventListener("webkitAnimationEnd", function(){ //动画结束时事件
		    console.log("动画结束");//动画结束时，控制台输出1
		    this.className = "imgopcity";
		}, false);
	 }else{
	 	this.style.cssText = "animation: mymovea 0.5s linear 1 alternate;transform:rotateZ(0deg)";
	 	//oImag[this.index].style.cssText = "animation: myouta 0.5s linear 1 normal;";
	 }
	this.style.left = oLeft + 'px';
	this.style.top = oTop + 'px';
	this.style.opacity= 0.6;
});

//触摸结束时的处理
oTuo[i].addEventListener('touchend', function(evt)
    {
    	
    	console.log('结束')
        var e = window.event || evt;
        e.preventDefault();//阻止其他事件
        //手指触摸结束的时候改变样式
      this.style.cssText = "";
      
})
}



</script>

</body>
</html>
移动端touch拖拽，拖动，改变animate动画事件

猜你喜欢
