一个类似宣传的H5页面
趁着闲置 做了一个H5的页面 感觉不错。
具体效果如下

框架上我选择
zepto(其实这个可有可无,推荐用原生的最好)
FullPage (感觉挺好用的一个全屏滚动插件 )
pageResponse (H5的一个适配小工具,感觉挺好用)
FullPage

pageResponse

页面样式 其实为了方便有些东西直接写在标签中了
一个小小的延时加载
var len = $("img").length;
var counter = 0;
for (var i = 0, img; i < len; i++) {
img = $("img")[ i ];
if (!img.getAttribute("load")) {
img.src = img.getAttribute("url");
}
img.onload = function () {
counter++;
if (counter >= len) {
}
};
}
在MP3预加载完毕以后自动切换带第一页
play.addEventListener("canplaythrough", function () {
runPage.go(1);
}
);
这里我在插件中runPage.removePage('page1’);
根据类名删除元素,更具索引的话会有些坑爹
还有一些CSS3的加载动画帧 总之东西不少
后面有些问题我会继续修正和修改,欢迎来我的GIT夺走源码,代码没有压缩想压缩的话自己压缩
https://github.com/Mrxdh
喜欢的话可以帮忙点击Follower
一个类似宣传的H5页面的更多相关文章
- 那些过目不忘的H5页面
原文链接:http://isux.tencent.com/great-mobile-h5-pages.html 从引爆朋友圈的H5小游戏<围住神经猫>,到颠覆传统广告的大众点评H5专题页& ...
- APP分享视频H5页面
男左女右中国APP需要做一个APP分享视频H5页面,效果图见下面的图. 出现的问题: (1)URL参数为中文的时候乱码: (2)vedio点击默认是QQ,微信的播放器: (3)给视频添加一个默认的封面 ...
- 领导让我重新做一个微信H5页面!
leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...
- 教你判断一个APP页面是原生的还是H5页面 。(还没看)
来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...
- 用vuex写了一个购物车H5页面的示例代码
用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...
- Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...
- 如何判断一个 APP页面是否是H5页面
1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...
- 编写第一个H5页面
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第 ...
- 如何判断一个 APP页面是否是H5页面(转载)
1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...
随机推荐
- VB.NET中图像处理的一些技巧以及其和C#图像处理的差距。
早期的时候我使用的开发工具是VB6,VB6做图像处理的速度在我的软件Imageshop中有所体现,还是算可以的.目前,我已经改用C#来研究图像算法,C#中有指针,做图像处理起来效率确实要高不少.VB. ...
- UVA11525 Permutation[康托展开 树状数组求第k小值]
UVA - 11525 Permutation 题意:输出1~n的所有排列,字典序大小第∑k1Si∗(K−i)!个 学了好多知识 1.康托展开 X=a[n]*(n-1)!+a[n-1]*(n-2)!+ ...
- NOIP2010pj三国游戏[博弈论]
题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有 N 位武将(N为偶数且不小于 4),任意两个武将之 ...
- 第14章 集合框架(1)-List集合的各种类
1.概述 1.1.Java集合框架的由来 1.2.什么是集合框架? 1.3.为什么需要集合框架 1.4.常用的框架接口规范 2.Vector类 2.1.存储原理 2.2.构造方法 2.3.常用方法 3 ...
- 第13章 Java常用类
1.自动装箱和自动拆箱 自动装箱:基本类型就自动的封装到与它相同类型的包装中:如: 创建一个对象时:Integer i = 100;本质上是编译器编译时为我们添加了:Integer i = new I ...
- C++学习笔记(3)
本学习笔记是C++ primer plus(第六版)学习笔记.是C++学习笔记(2)的后续.复习C++基础知识的可以瞄瞄. 转载请注明出处http://www.cnblogs.com/zrtqsk/p ...
- Struts2 token禁止重复提交表单
如果服务器响应慢的情况下,用户会重复提交多个表单,这时候有两种设计思想: 1.在客户端使用JS技术,禁止客户重复提交表单.但是这样会使一些不使用浏览器方式登陆的人比如使用底层通信来攻击你的服务器 2. ...
- 【.NET实战教程】北风网基于ASP.NET多层架构下的企业级进销存软件全程培训
.Net进销存系统详细课程大纲(开发工具采用VS2008+sqlsever2005) [小编提醒:现在学习的话,可以使用vs2012+sql 2008 学习的是思路,教学环境不一定要一模一样]1.项目 ...
- iOS 关于字体根据不同屏幕尺寸等比适配的问题(zz)
http://www.jianshu.com/p/5815e81abb52 背景 去年的六月份开始了一个新的项目,此项目支持的设备从4S开始一直到6+,也就是说屏幕的尺寸最小的320x480 最大的1 ...
- mariadb
MariaDB数据库管理系统是MySQL的一个分支