<!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>
来源：CSDN
作者：q雨中漫步q
链接：https://blog.csdn.net/qq_39918584/article/details/82831269