效果如下：拖动翻阅卡片，或点击‘下一张’翻阅卡片效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=0">
<title>document</title>
<style>
.containt{position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}
ul,li{margin:0; padding:0;}
ul{position:absolute; left:100px; right:100px; top:150px; bottom:200px;}
ul>li{list-style:none; display:none; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 15px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.1); background:#f6f6f6; transition:.3s; -webkit-transition:.3s; cursor:pointer;}
ul>li img{width:100%;}
ul>li:nth-child(1){display: block; z-index:2;}
ul>li:nth-child(2){display: block; transform:matrix(0.95,0,0,1,0,-20); -webkit-transform:matrix(0.95,0,0,1,0,-20); z-index: 1;}
ul>li:nth-child(3){display: block; transform:matrix(0.9,0,0,1,0,-40); -webkit-transform:matrix(0.9,0,0,1,0,-40); z-index: 0;}
ul>li>.content{height:100%; width: 100%;}
ul>li:nth-child(2)>.content{opacity:0.9;}
ul>li:nth-child(3)>.content{opacity:0.8;}
.footer{position: absolute; display:flex; display:-webkit-flex; bottom:0; left:0; right:0; height:150px; -webkit-align-items:center; -webkit-justify-content:center; text-align: center;}
.footer .button{width:80px; height:80px; line-height: 80px; background:#000; border-radius: 50%; color:#fff;}
</style>
</head>
<body>
<p>
<ul>
<li>
<p background-image="">
<img src="http://y.gtimg.cn/music/photo_new/t001r150x150m000002j4uuk29y8by.jpg">
</p>
</li>
<li>
<p>
<img src="http://y.gtimg.cn/music/photo_new/t001r150x150m0000025nhln2ywrp4.jpg">
</p>
</li>
<li>
<p>
<img src="http://y.gtimg.cn/music/photo_new/t001r150x150m000004alfub0cvkn1.jpg">
</p>
</li>
<li>
<p>
<img src="http://y.gtimg.cn/music/photo_new/t001r150x150m000003nz2so3xxyek.jpg">
</p>
</li>
<li>
<p>
<img src="http://y.gtimg.cn/music/photo_new/t001r150x150m000001blpxf2dyje2.jpg">
</p>
</li>
<li>
<p background-image="">
<img src="http://y.gtimg.cn/music/photo_new/t001r150x150m000002j4uuk29y8by.jpg">
</p>
</li>
</ul>
<p>
<p>下一张</p>
</p>
</p>
<script src="../js/jquery-3.2.0.min.js"></script>
<script>
window.onload = function(){
var pos = {};
var distance_pos = {};
var transition;
var touchstart = function(e){
var event = e ? e : window.event;
var touch = event.touches[0];
var target = event.target || event.srcelement;
transition = target.style.transition;
pos = {
x: touch.pagex,
y: touch.pagey
}
this.addeventlistener('touchmove', touchmove, false);
this.addeventlistener('touchend', touchend, false);
}
var touchmove = function(e){
var event = e ? e : window.event;
var touch = event.touches[0];
if($("li").length<2){
alert("已经是最后一张了");
this.removeeventlistener('touchstart', touchstart, false);
this.removeeventlistener('touchmove', touchmove, false);
this.removeeventlistener('touchend', touchend, false);
return false;
}
distance_pos = {
x: touch.pagex - pos.x,
y: touch.pagey - pos.y
}
this.style.transition = 'none';
this.style.webkittransition = 'none';
this.style.left = `${distance_pos.x}px`;
this.style.top = `${distance_pos.y}px`;
}
var touchend = function(e){
var event = e ? e : window.event;
this.style.transition = transition;
this.style.webkittransition = transition;
if(math.abs(distance_pos.x) > math.abs(distance_pos.y)){
//水平滑动
if(distance_pos.x < -50){
// 向左滑出
this.style.left = '-640px';
removetouchevent(this)
}else if (distance_pos.x > 50) {
// 向右滑出
this.style.left = '640px';
removetouchevent(this)
}else{
this.style.top = '0px';
this.style.left = '0px';
}
}else{
//垂直滑动
if(distance_pos.y < -50){
// 向上滑出
this.style.top = '-150%';
removetouchevent(this)
}else if (distance_pos.y > 50) {
// 向下滑出
this.style.top = '150%';
removetouchevent(this)
}else{
this.style.top = '0px';
this.style.left = '0px';
}
}
this.removeeventlistener('touchmove', touchmove, false);
this.removeeventlistener('touchend', touchend, false);
}
var listentouchevent = function(){
$("li")[0].addeventlistener('touchstart',touchstart,false)
}
var removetouchevent = function(el){
settimeout(function(){
$(el).remove();
listentouchevent()
},300)
}
listentouchevent()
$(".button").click(function(){
var element = $("li")[0];
if($("li").length<2){
return;
}
element.style.transform = 'translate(640px,0px)';
removetouchevent(element);
})
}
</script>
</body>
</html>
以上就是如何实现卡片翻阅效果的详细内容。