类似易企秀的h5页面如何制作，邀请函，贺卡

最新推荐文章于 2023-09-27 07:30:00 发布

xieqian0204

最新推荐文章于 2023-09-27 07:30:00 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/xieqian0204/article/details/87863765

版权

有时候需要自己开发类似易企秀的页面，例如邀请函，贺卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>邀请函，贺卡</title>
    <link rel="stylesheet" href="css/prac1.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <style type="text/css">
        *{padding:0;margin:0;touch-action: none;}
        body,html{height:100%;background-color:#fff}
        .wrap{width:100%;height:100%;overflow:hidden}
        .wrap2{width:100%;height:1000%;transition:.3s linear}
        .page{width:100%;height:10%;background-color:#fff;font-size:100px;text-align:center;font-weight:700;display: flex;align-items: center}
        .page .pic{width:100%;height:auto;align-items: center;}
    </style>
</head>
<body>
<span id="musicControl">
        <a href="messageBoard.html"><button>寄祝福</button></a>
        <a id="mc_play" class="on" >
            <audio id="Jaudio" class="media-audio" src="ZIZZ%20STUDIO%20-%20Myself;Yourself%20(VIOLIN&PIANO%20Ver.).mp3" preload loop="loop"></audio >
        </a>
 </span>
<div class="wrap" id="wrap">
    <div class="wrap2" id="wrap2">
        <div class="page"><img class="pic" src="images/1.jpg"></div>
        <div class="page"><img class="pic" src="images/2.jpg"></div>
        <div class="page"><img class="pic" src="images/3.jpg"></div>
        <div class="page"><img class="pic" src="images/4.jpg"></div>
        <div class="page"><img class="pic" src="images/5.jpg"></div>
        <div class="page"><img class="pic" src="images/6.jpg"></div>
        <div class="page"><img class="pic" src="images/7.jpg"></div>
        <div class="page"><img class="pic" src="images/8.jpg"></div>
        <div class="page"><img class="pic" src="images/9.jpg"></div>
    </div>
</div>
<script src="js/reset.js"></script>
<script type="text/javascript">
    //重要！禁止移动端滑动的默认事件
    document.body.addEventListener('touchmove', function(event) {
        event = event ? event : window.event;
        if(event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue = false
        }
    }, false)
    var pages = function(obj) {
        var box = document.getElementById(obj.wrap);
        var box2 = document.getElementById(obj.wrap2);
        var len = obj.len;
        var n = obj.n;
        var startY, moveY, cliH;
        //获取屏幕高度
        var getH = function() {
            cliH = document.body.clientHeight
        };
        getH();
        window.addEventListener('resize', getH, false);
        //touchStart
        var touchstart = function(event) {
            if(!event.touches.length) {
                return;
            }
            startY = event.touches[0].pageY;
            moveY = 0;
        };
        //touchMove
        var touchmove = function(event) {
            if(!event.touches.length) {
                return;
            }
            moveY = event.touches[0].pageY - startY;
            box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
        };
        //touchEnd
        var touchend = function(event) {
            //位移小于+-50的不翻页
            if(moveY < -50) n++;
            if(moveY > 50) n--;
            //最后&最前页控制
            if(n < 0) n = 0;
            if(n > len - 1) n = len - 1;
            //重定位
            box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
            console.log(n)
        };
        //touch事件绑定
        box.addEventListener("touchstart", function(event) {
            touchstart(event)
        }, false);
        box.addEventListener("touchmove", function(event) {
            touchmove(event)
        }, false);
        box.addEventListener("touchend", function(event) {
            touchend(event)
        }, false);
    };
    pages({
        wrap: 'wrap', //.wrap的id
        wrap2: 'wrap2', //.wrap2的id
        len: 10, //一共有几页
        n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
    });
</script>
<script>
    ///解决ios上音乐不能自动播放的问题
    function audioAutoPlay(id){
        var audio = document.getElementById(id);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay('Jaudio');
</script>
<!--<script src="js/prac1.js"></script>-->
</body>

</html>

xieqian0204

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
类似易企秀的h5页面如何制作，邀请函，贺卡

有时候需要自己开发类似易企秀的页面，例如邀请函，贺卡&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-sca
复制链接

扫一扫