H5易企秀
周末被领导叫回来加班,说要做一个易企秀一样的页面,然后就有这篇笔记
原计划用几百个计时器去执行,后面放弃了,太难改了,还是选择了animate.css
插件,这是一个纯css的插件,只需要引入css就行了
先分析需要什么功能
- 确定要几个页面,页面不能滚动
- 页面通过一个箭头进入下一页,还要监听手势向上滑向下滑
- 进入新的页面一开始必须是空的,然后再用动画把图片文字显示出来
- 插件的使用是给dom元素添加class,监听动画结束后去除class就行
- 进入要有动画,离开要有反方向动画
// 这是插件建议给的用法
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
}
// 使用
animateCSS('.my-element', 'bounce', function() {
// 下一个动画
})
但是上面只能传一个参数,但是这个插件除了动画参数还有执行速度还有执行时间
// animated 必要
// bounce 动画效果必要
// 执行速度也就是总时间,可以不要
// 几秒后开始,可以不要
<div class="animated bounce faster delay-2s">Example</div>
改下代码支持多个传参
var node = document.querySelector(element)
function handleAnimationEnd() {
node.classList.remove('animated', ...animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
node.classList.add('animated', ...animationName)
// 使用
animateCSS('.my-element', ['bounce','delay-2s'], function() {
// 下一个动画
})
正式开始
css就自己写吧,贴出来太长了
app是全屏,禁止滚动,超出隐藏
下面的page每个都是占满全屏就行
page里的元素都是相对page的定位
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<div id="app">
<div id="page1" class="page">
<img src="img/indexBg.png" />
<img src="img/biaoTi@2x.png" id="page1_title" class="hide">
<img src="img/Lead@2x.png" id="page1_Lead" class="hide">
<img src="img/kaiShi@2x.png" id="page1_kaiShi" class="hide">
</div>
<div id="page2" class="page" style="display: none;" >
<img src="img/tongYongBg.png"/>
<img src="img/biaoTi2@2x.png" id="page2_title" class="hide">
<img src="img/1@2x.png" id="page2_wenZi" class="hide">
<img src="img/kaiShi2@2x.png" id="page2_kaiShi" class="hide">
</div>
...
</div>
<div>
<div id="nextBtn" style="display: none;" onclick="touchDown()">
<img src="img/next.png" class="animated bounce infinite">
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
// 当前页数
var nowPage = 0
// 所有页数的id存储器
var pageArr = ["page1","page2"]
// 是不是可以进入下一页的标记,需要等动画结束才能进入下一页
var flag = false
function init(){
// 给window添加滑动时间监听
last_next()
// 初始化全部
allhide()
// 初始化第一个页面
page1()
}
init()
function allhide(){
$('.hide').hide()
}
function animateCSS(element, animationName, callback) {
var node = document.querySelector(element)
function handleAnimationEnd() {
node.classList.remove('animated', ...animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
node.classList.add('animated', ...animationName)
// 上面hide隐藏的元素在执行动画的时候要重新显示
$(node).show()
}
function animateCSSOut(element, animationName, callback) {
var node = document.querySelector(element)
function handleAnimationEnd() {
node.classList.remove('animated', ...animationName)
node.removeEventListener('animationend', handleAnimationEnd)
// 退出动画结束后隐藏
$(node).hide()
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
node.classList.add('animated', ...animationName)
}
function last_next(){
var start = 0
document.body.addEventListener("touchstart",function(e){
start = e.changedTouches[0].pageY
})
// 微信页面向上向下拖动会出现橡皮筋,应该取消掉,就是组织页面的touch事件
// 但是普通页面不能这么做,这样连列表都不能滚动
document.body.addEventListener("touchmove",function(e){
e.preventDefault();
},{passive: false})
document.body.addEventListener("touchend",function(e){
var end = e.changedTouches[0].pageY;
if(end>start+100 && flag){
touchDown()
console.log("向下滑")
}else if(start>end+100 && flag){
touchUp()
console.log("向上滑")
}
})
}
function page1(){
animateCSS("#page1_title",["fadeInDownBig"])
animateCSS("#page1_Lead",["zoomInLeft","slow"],function(){
animateCSS("#page1_wenZi",["bounceInUp"],function(){
animateCSS("#page1_kaiShi",["bounceInRight"])
$("#nextBtn").show()
flag = true
})
})
}
function page1out(cb){
animateCSSOut("#page1_Lead",["zoomOutRight"])
animateCSSOut("#page1_wenZi",["bounceOutDown"])
animateCSSOut("#page1_kaiShi",["bounceOutRight"])
animateCSSOut("#page1_title",["fadeOutUpBig"],function(){
cb()
})
}
function page2(cb){
animateCSS("#page2_title",["fadeInDownBig"])
animateCSS("#page2_wenZi",["flipInY","slow"],function(){
animateCSS("#page2_kaiShi",["rubberBand"])
$("#nextBtn").show()
flag = true
})
}
function page2out(cb){
$('#page2_kaiShi').hide()
animateCSSOut("#page2_wenZi",["flipOutY"])
animateCSSOut("#page2_title",["fadeOutUpBig"],function(){
cb()
})
}
function touchUp(){
$("#nextBtn").hide()
flag = false
window[pageArr[nowPage]+"out"](function(){
var lastPage = nowPage;
if(lastPage==pageArr.length-1){
nowPage = 0
}else{
nowPage++;
}
// 上一页效果
$("#"+pageArr[nowPage]).css({
"display":"block",
"z-index":"100"
})
animateCSS('#'+pageArr[nowPage], ['fadeInUp'],function(){
$("#"+pageArr[lastPage]).css({
"display":"none",
"z-index":"1"
})
$("#"+pageArr[nowPage]).css({
"z-index":"1"
})
window[pageArr[nowPage]]()
})
})
}
function touchDown(){
$("#nextBtn").hide()
flag = false
window[pageArr[nowPage]+"out"](function(){
var lastPage = nowPage;
if(lastPage==0){
nowPage = pageArr.length - 1
}else{
nowPage--;
}
// 下一页效果
$("#"+pageArr[nowPage]).css({
"display":"block",
"z-index":"100"
})
animateCSS('#'+pageArr[nowPage], ['fadeInDown'],function(){
$("#"+pageArr[lastPage]).css({
"display":"none",
"z-index":"1"
})
$("#"+pageArr[nowPage]).css({
"z-index":"1"
})
window[pageArr[nowPage]]()
})
})
}
小模块,加班就当练练手了,在加上一个右上角的音频播放,就跟易企秀很像了
代码上传到github上,
预告,下一期公司要做年会大屏幕抽奖
H5易企秀的更多相关文章
- 易企秀 we+ Maka 兔展 四大H5页面制作工具
H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...
- 易企秀H5 json配置文件解密分析
最近需要参考下易企秀H5的json配置文件,发现已经做了加密,其实前端的加密分析起来只是麻烦点. 抓包分析 先看一个H5: https://h5.eqxiu.com/s/XvEn30op F12可以看 ...
- H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权
代码地址如下:http://www.demodashi.com/demo/14960.html 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具. ...
- 如何搭建易企秀H5平台?
导读 易企秀如何开启伪静态支持? 一秀如何开启伪静态? 下载易企秀源码 oschina: http://git.oschina.net/jsper/html5Editor Windows下搭建环境 安 ...
- 易企秀微场景2016最新完整版V10.5,小编亲测修复众多错误
易企秀V10.5更新说明1.修复拨号英文错误2.修复转送场景问题3.修复设置场景密码乱码问题4.修复前台批量删除客户图片5.修复数据收集分页问题6.修复图片分类错乱问题7.修复音乐和特效冲突问题8.修 ...
- 易企CMS仿站标签说明
头部标签: 每个页面都必须加的三大标签(将标签放入header.tpl里面,这样只需在每个模板中调用header.tpl即可): <title>{$seotitle}_{$sitename ...
- 易企CMS主要模板文件介绍
article.tpl 文章内容页模板 catalog.tpl 文章,产品目录页模板 category.tpl 分类页模板 comment.tpl 留言页模板 footer.tpl 页尾模板 head ...
- 易企CMS模板调用标签列表
格式化URL formaturl 参数:type (生成URL类型) 可选值:article,product,category,catalog,comment参数:siteurl (生成URL网站地址 ...
- 【干货】微信场景之H5页面制作免费工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
随机推荐
- iOS之Xcode提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploading this package
https://www.jianshu.com/p/6d465a0ea58e 这句英文翻译过来就是: 无法继续交付:现有的传输程序实例目前正在上载此包 原因:上传的动作被记录在UploadToken中 ...
- Python中.npz文件的读取
有时候从网上下载的数据集扩展名(后缀名)是npz,我们需要对数据进行加载(读取):例如:识别猫狗图片的二分类,下的数据集分别为cat.npz和dog.npz import numpy as npcat ...
- Session共享解决方案
使用nginx做的负载均衡添加一个ip_hash配置 一.开两个Tomcat写测试程序 @WebServlet("/nginxSessionServlet") public cla ...
- Python学习笔记004
变量 变量的命名规则1. 要具有描述性2. 变量名只能_,数字,字母组成,不可以是空格或特殊字符(#?<.,¥$*!~)3. 不能以中文为变量名4. 不能以数字开头,下划线或者小写字母开头,驼峰 ...
- Linux系统的发展历史和学习前景介绍
2020年了,我想来跟大家聊聊Linux运维这一行业,从几个方面说下行业的现状.如何学好Linux和如何成为专业运维人员以及云服务对于Linux运维的影响. 一.linux行业状况 我们都知道从199 ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
- 搭建PXE实现自动化安装系统
一.PXE工作原理 Ø Client向PXE Server上的DHCP发送IP地址请求消息,DHCP检测Client是否合法(主要是检测Client的网卡MAC地址),如果合法则返回Client的I ...
- HackerOne去年发放超过8200万美元的赏金,联邦政府参与度大幅上涨
2019年,由黑客驱动的漏洞赏金平台HackerOne支付的漏洞奖金几乎是前几年总和的两倍,达到8200万美元. HackerOne平台在2019年也将注册黑客数量翻了一番,超过了60万,同时全年收到 ...
- npm和npx
npx 指令会先在项目的node_modules里面找资源包 npm info 包名称 [查看资源包的信息]
- Day11 - H - Euclid's Game HDU - 1525
Two players, Stan and Ollie, play, starting with two natural numbers. Stan, the first player, subtra ...