zoukankan      html  css  js  c++  java
  • 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上,

    预告,下一期公司要做年会大屏幕抽奖

  • 相关阅读:
    PNG文件格式具体解释
    opencv2对读书笔记——使用均值漂移算法查找物体
    Jackson的Json转换
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 单词接龙
  • 原文地址:https://www.cnblogs.com/pengdt/p/12072491.html
Copyright © 2011-2022 走看看