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天的时间便创造了用 ...
随机推荐
- Mac OS删除文件夹和文件的命令
https://www.jianshu.com/p/0376bf0514e3 2017.08.18 17:27* 字数 219 阅读 16709评论 0喜欢 0 rmdir删除空目录,不过一旦目录非空 ...
- HTML5中新增的主体结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以使一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内 ...
- linux jar 启动shell 脚本
#!/bin/bash APP_NAME=/data/wwwroot/app.jar #使用说明,用来提示输入参数 usage() { echo "Usage: sh app.sh [sta ...
- MySQL之关系
目录 关系 多对多的关系,如何通过mysql来表示 一对一关系 关系 多对多的关系,如何通过mysql来表示 站在老师的角度 一个老师可以教多个学生, 一个老师也可以教一个学生. 站在学生的角度 一个 ...
- Primecoin在windows上的部署和启动服务
Primecoin在windows上的部署和启动服务: 一.从官方获得Primecoin的windows版安装包: 二.一路像安装客户端一样的安装: 三.安装成功后它会自动弹出客户端运行,同步数据, ...
- node.js绑定监听事件EventEmitter类
Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,如下: // 引入 events 模块 var events = r ...
- 图解JVM--(二)垃圾回收
垃圾回收 1.如何判断对象可以回收 1.1 引用计数 在对象中添加一个引用计数器,每当有一个地方引用它,计数器值就加一,当引用失效时,计数器值就减一,任何时刻计数器为零的对象就不可能再被使用的,就可以 ...
- Java中小数精度问题
代码如下:主要是利用java中写好的DecimalFormat类进行设置(#,0,%) import java.text.DecimalFormat; import java.util.Arrays; ...
- 自定义Model类
声明文件 #import <Foundation/Foundation.h> @interface OrderRecordModel : NSObject @property (nonat ...
- JS 删除对象中指定的值
1,通过delete删除 2,通过filter filter需要在循环的时候判断一下是true还是false,是true才会返回这个元素: let arr1 = [1,2,3]; let arr2 = ...