一个类似宣传的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只有整个页面的一 ... 
随机推荐
- openstack云5天资料
			在网上看到有个人的博客,写了个openstack云5天学习资料.对于英文不怎么好的童鞋来说,感觉还可以.可以对openstack有所了解和认识,对后续openstack更加深入的学习有很大的帮组. ... 
- JQuery判断元素是否存在
			JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ... 
- strstr 函数的实现
			strstr函数:返回主串中子字符串的位置后的所有字符. #include <stdio.h> const char *my_strstr(const char *str, const c ... 
- UNIX文件的权限之“设置用户ID位”
			用stat函数可以获取一个文件的状态信息,原型是这样的: int stat(const char *path, struct stat *buf); 其中结构体stat的结构: struct stat ... 
- [转]jquery遍历table的tr获取td的值
			html代码: 1 <tbody id="history_income_list"> 2 <tr> 3 <td align="center& ... 
- ThreadLocal()理解
			在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序. 当使用 ... 
- quartz-1.8.5 Demo
			最近在研究Spring中的定时任务功能,最好的办法当然是使用Quartz来实现.对于一个新手来说,花了我不少时间,这里我写个笔记,给大家参考. 我使用的是Maven来管理项目,需要的Jar包我给大家贴 ... 
- jmeter(六)元件的作用域与执行顺序
			jmeter是一个开源的性能测试工具,它可以通过鼠标拖拽来随意改变元件之间的顺序以及元件的父子关系,那么随着它们的顺序和所在的域不同,它们在执行的时候,也会有很多不同. jmeter的test pla ... 
- tfs2012迁移,只用到源代码管理
			背景:在虚拟机里面安装的tfs,后来发觉C盘空间太少了,运行卡,准备重新配置一台虚拟机当做tfs服务器.安装相同版本的tfs.数据库(至少比原来的版本一样或者更高版本,要不附加不了数据库). 1.确保 ... 
- 从数据库导出到excel
			在项目 扬中 News shenbaocreateall //选中的id string cc = Request["IDcheck"]; Response.C ... 
