一个类似宣传的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只有整个页面的一 ...
随机推荐
- matlab里的svmtrain的输出model里,各参数的含义
Parameters: [5x1 double] %结构体变量,依次保存的是 -s -t -d -g -r等参数 nr_class: 4 %分类的个数 totalS ...
- python高级之多线程
python高级之多线程 本节内容 线程与进程定义及区别 python全局解释器锁 线程的定义及使用 互斥锁 线程死锁和递归锁 条件变量同步(Condition) 同步条件(Event) 信号量 队列 ...
- jquery中attr()与prop()区别
我们知道jquery中获取元素属性有两种常见的方法,一个是attr()方法,这个是用的比较多的,也是我们第一个想到的.另外一个就是prop()方法了,这个方法之前很少用到,它是jquery1.6之后新 ...
- Qt——自定义属性
一.Qt中的属性 属性是指窗口或控件的属性,比如opacity属性表示“透明度”,geometry指的是“位置和大小”,pos属性代表“位置”. qt中的控件有自带的属性,我们也可以自己定义属性. Q ...
- 关于Linux与Windows的区别的文章
你从来只用过Windows,从来没接触过UNIX,只知道把一个文件拽来拽去,只知道硬盘就是C: D: E:却从来没有研究过分区表,也许 会用VC编个程序,很习惯它的集成环境.... 有一天,不管什么原 ...
- 分享录制的正则表达式入门、高阶以及使用 .NET 实现网络爬虫视频教程
我发布的「正则表达式入门以及高阶教程」,欢迎学习. 课程简介 正则表达式是软件开发必须掌握的一门语言,掌握后才能很好地理解到它的威力: 课程采用概念和实验操作 4/6 分隔,帮助大家理解概念后再使用大 ...
- 延迟容忍网络(Delay-tolerant networking)
标签: 网络networking存储工作network路由器 2012-03-24 10:01 3702人阅读 评论(0) 收藏 举报 分类: 计算机网络(12) 版权声明:本文为博主原创文章,对文章 ...
- LCS问题
最长公共子序列问题 1.这里pre数组表示回溯的方式,状态转移方程!!! #include <iostream> #include <algorithm> #include & ...
- .pop ----remove 删除
s = {1,2,3,4,5,6,'sn','7'} s.pop()#删除随机值 print(s)#{2, 3, 4, 5, 6, '7', 'sn'} s.remove('sn')#删除值 prin ...
- Ubuntu 14.04.1 建立 Android M, Android N 開發環境 與 問題
# Modify /etc/apt/sources.list# add below 3 lines to /etc/apt/sources.listdeb http://archive.ubuntu. ...