类似易企秀的h5页面如何制作，邀请函，贺卡
2024-04-12 08:58:41
有时候需要自己开发类似易企秀的页面，例如邀请函，贺卡
<!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="data:images/1.jpg"></div><div class="page"><img class="pic" src="data:images/2.jpg"></div><div class="page"><img class="pic" src="data:images/3.jpg"></div><div class="page"><img class="pic" src="data:images/4.jpg"></div><div class="page"><img class="pic" src="data:images/5.jpg"></div><div class="page"><img class="pic" src="data:images/6.jpg"></div><div class="page"><img class="pic" src="data:images/7.jpg"></div><div class="page"><img class="pic" src="data:images/8.jpg"></div><div class="page"><img class="pic" src="data: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);//touchStartvar touchstart = function(event) {if(!event.touches.length) {return;}startY = event.touches[0].pageY;moveY = 0;};//touchMovevar touchmove = function(event) {if(!event.touches.length) {return;}moveY = event.touches[0].pageY - startY;box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面};//touchEndvar 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的idwrap2: 'wrap2', //.wrap2的idlen: 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>类似易企秀的h5页面如何制作，邀请函，贺卡相关推荐
- [H5页面生成工具 v1.14.1] 通 过拖拽的形式生成页面的工具+类似易企秀百度H5
介绍: 鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀.百度H5等工具. 鲁班H5特征: 1.编辑器 参考线 吸附线.组件对齐 拽改变组件形状 元素: 复制(画布) 元素 ...
- 堆米微信H5页面怎么制作？易企秀微信H5页面制作，微信简历制作，
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
- H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权
代码地址如下: http://www.demodashi.com/demo/14960.html 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具 ...
- h5动画 php,GitHub - calcyu/wechat_html5_animate: 微信上的HTML5动画，类似易企秀效果。...
wechat_html5_animate ##微信上的HTML5动画,类似易企秀效果. ##制作HTML5动画的动机 微信上收到了一个可以编辑祝福语的拜年H5,故想尝试一下如何制作. ##制作工具 A ...
- 【H5】用易企秀做H5做完发现页面播放顺序乱套了？？？请不要单选自动播放
易企秀做H5作品 H5用来做网站也是很不错的,主流浏览器都支持H5,相比之前的版本,H5做网站就方便很多,因为它自带很多的控件,专业人员可以用H5写网站.APP或者小游戏的开发.同时,用H5页面做手机 ...
- 如何实现类似易企秀的可视化 H5 编辑器?
易企秀H5项目架构梳理 现有一款 可视化的 H5 编辑器 (类似易企秀, 使用 React 开发) 提供私有化部署, 绑定域名, 定制开发, 源码售卖培训 等服务 主要面向 对数据要求高, 需要私有化 ...
- 类似易企秀的UI框架 整屏滑动
swiper.js和fullpage.js swiper: 可以适用VUE框架, 官网:https://www.swiper.com.cn/ 安装及使用:https://github.com/surm ...
- 最新鲁班H5页面生成工具系统源码+功能强大/仿易企秀
正文: 最新鲁班H5页面生成工具系统源码+功能强大/仿易企秀,这系统的功能真的非常强大,都是主流很高级的一些技术开发的. Vue2.0开发,通过拖拽的形式,生成页面的工具,类似易企秀.百度H5等工具. ...
- java 仿易企秀_鲁班H5(开源可视化搭建系统, 可以理解为开源版本易企秀)核心实现原理解析...
鲁班H5核心原理解析(开源版本的拖拽生成H5平台,功能类似易企秀的开源可视化搭建系统) 相关地址 鲁班H5是什么? 鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀.百度 ...
最新文章
- java中 2017 1等于_java 2017秋招1
- Linux基础优化之SElinux和iptables项
- 关于“minSdkdeviceSdk”解决办法
- Jquery的Split二次分割
- oracle u01目录 100,文件目录空间利用率达到100%而导致数据库异常挂起的故障处理过...
- wp7 --缓动动画
- Python生态概览（一）：数据分析库、数据可视化库、文本处理库、机器学习库、深度学习库
- python pdfplumber 打开文件失败_喜大普奔 | 如何在Win10下利用Python打开grib文件
- linux服务器证书安装教程,linux服务器使用certbot免费安装ssl证书
- Fiddler 4 模拟 服务端返回 json
- cs用服务器运行,如何搭建自己的CS服务器（插件配置篇）
- 这是我转载的一篇，真的是不错《把SWF变回FLA》大家可以试试
- 释放docker日志所占空间
- 喜欢看漫画的小伙伴就不要错过啦，python批量爬取动漫免费看
- 超算计算机需要显卡吗,NVIDIA：中国超算性能世界第一认了 但省电我最强
- leetcode：2448. 使数组相等的最小开销【猜结论落在给定点 + 考虑初始值和变化量 + 三分法模板学习】
- ConstrainLayout约束布局
- 专线与家庭宽带的区别？
- 操作系统课程设计--在Linux环境下模拟实现简单命令解释器（C++代码）
- 王刚日记：网络兼职赚钱重点需要学哪些技能？