背景需求 | 给业务部分在m站实现一个邀请函的h5页面,基本流程:1.会议主题,2邀请函内容,3会议安排,4会议网络资源二维码,5酒店安排 |
技术分析 | 将ppt搬到h5上,每一页要用帧显示(这个没有用过)、每一项用加载效果 淡入淡出等、增加音乐效果、增加翻页提示箭头图标 |
Swiper | 官网 http://www.swiper.com.cn/ 了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。主要是为IOS而设计的,同时,在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。 http://www.html5jq.com/fe/javascript_jQuery/20141114/3.html |
demo |
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="idangerous.swiper.css">
<script type="text/javascript" src="idangerous.swiper-2.1.min.js"> </script>
<style type="text/css">
.swiper-container, .swiper-slide {
width: 500px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper('.swiper-container',{
//添加需要的选项:
mode:'horizontal',
loop: true
//等等..
});
};
</script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide" style="height:667px; background-color: aqua">
<!-- 这里添加第一个HTML内容 -->
第一帧
</div>
<!--Second Slide-->
<div class="swiper-slide" style="height:667px; background-color: bisque">
<!-- 这里添加第二个HTML内容 -->
第二帧
</div>
<!--Third Slide-->
<div class="swiper-slide" style="height:667px; background-color: bisque">
<!-- 这里添加第三个HTML内容 -->
第三帧
</div>
<!--Etc..-->
</div>
</div>
</body>
</html>
|
总结 | 不需要依赖jquery <link rel="stylesheet" href="idangerous.swiper.css"> <script type="text/javascript" src="idangerous.swiper-2.1.min.js"> </script> 非常简单易用, 需要将功能扩展一下,如果在pc上翻页是需要加pc版的翻页效果 callback事件 是保证交互连续的重点 |
转载于:https://www.cnblogs.com/viewcozy/p/4574883.html