php实现教学卡片,如何实现卡片翻阅效果

效果如下：拖动翻阅卡片，或点击‘下一张’翻阅卡片效果

Document

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

• 

• 

• 

• 

• 

• 

下一张

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

})

}