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);
})
}
php实现教学卡片,如何实现卡片翻阅效果相关推荐
- 在leangoo里怎么复制卡片,删除卡片,查看任务轨迹?
复制卡片: 点击卡片右侧复制卡片按钮可以将卡片复制到目标看板的列表中,复制时卡片所有内容都会被复制. 查看任务轨迹: 任务轨迹是一个任务从创建开始到当前状态的历史轨迹. 删除卡片: 删除卡片有两种方式 ...
- 【Axure教程】分类筛选卡片(订单卡片案例)
卡片是系统常用的展示方式,采用卡片式布局能更直观的用户界面.所以作者今天就和大家分享如何在Axure中制作出分类筛选卡片的原型模板,我们已订单卡片为案例,包括以下交互效果: 1.筛选:可以根据卡片不同 ...
- cocos植物大战僵尸(四)选择植物卡片:植物卡片类
2.4 选择植物卡片 在播完地图滚动后出现选择植物卡片层.能够选择相应的植物进行游戏. 2.4.1 植物卡片类 植物卡片是实体类的子类.实体类是游戏中一切能看到的,可操作的游戏元素.植物卡片具备以下功 ...
- Creator实战项目【保卫萝卜】-- 卡片层、卡片
把卡片精灵做成预制体,锚点为0,0 创建一个卡片层,继承于脚本基类,在卡片层脚本中拿到预制体创建卡片(卡片要通过代码创建,不要直接在层级管理器中挂,否则会在Game.ts的onLoad加载所有节点是我 ...
- 进入固定资产卡片管理双击卡片后提示“null无效
T66.1版本,原始卡片使用软件自带导入功能导入,进入固定资产卡片管理双击卡片后提示"null"无效,经跟踪数据库后发现为表fa_cards中有一列dbltransdeprt值为N ...
- AE学习笔记 日历翻阅效果
日历翻阅效果 1.打开AE,新建合成,新建纯色(选择纯色层颜色),打开标题/动作安全,使用矩形工具,在对齐边框画一个矩形:使用文字工具输入一个数字:使用对齐工具,让数字位于矩形背景中间.(ctrl+r ...
- php实现教学卡片,CSS3实现卡片效果
第一步:确定 HTML 代码结构 在创建 HTML 代码前,你首先应该想象它的结构.当你有一个好的模型时,应该第一时间把你想象的页面结构或者你的 CSS 模块及时地在纸上罗列出来.一个设计合理.结构良 ...
- Android横向滚动卡片,Android滑动卡片成效:Swipecards
一个类似于 Tinder的Android库,用于创建滑动卡片效果. 您可以向左或向右滑动来切换喜欢或不喜欢的内容. //implement the onFlingListener public cla ...
- 太极发送卡片软件_qn卡片版app下载-QN模块卡片版软件 v35_5577安卓网
qn卡片版app下载,这是一款功能强大的框架辅助,软件功能极为丰富,软件能够自己进行应用转生并完成Xposed框架的安装,深度优化手机系统,欢迎有需求的用户下载体验! [软件详情] 你是手机系统的羑好 ...
最新文章
- 没抢到欧冠杯的票?没关系!在VR中看!
- CNCC技术论坛:后量子霸权阶段的量子计算
- 数据库:学好SQL必须知道的10个高级概念
- 关于html-三角的制作
- 神还原女神照片!GAN为百年旧照上色
- mysql force_MySQL force Index 强制索引概述
- 十年无果,Linux 开发者放弃 VMware 诉讼
- SQL光标的基本使用
- 用HTML5做一个个人网站,此文仅展示个人主页界面。内附源代码下载地址
- 2021年安全生产模拟考试(全国特种作业操作证电工作业-电力电缆模拟考试题库二)安考星
- ios蓝牙开发错误总结
- 如何判断自己的手机是山寨机?如何判断山寨机的芯片型号和平台?
- java项目环境怎么写_开发环境怎么写
- 同一无线络下电脑会打不开个别的网站网页,而手机却可以打开。
- matlab字号单位是磅吗,Office软件中字体“号”与“磅”的关系
- python里output是什么意思_Python入门系列:Input/Output
- flask debug模式logging模块报错os.rename(self.baseFilename, dfn) WindowsError: [Error 32]
- 进出队C语言不用链表,C语言面试题总汇简要
- 论文阅读笔记——Multi-Label Learning with Global and Local Label Correlation(具有全局和局部标签相关性的多标签学习)
- Java面试——缓存