趁着闲置 做了一个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页面的更多相关文章

  1. 那些过目不忘的H5页面

    原文链接:http://isux.tencent.com/great-mobile-h5-pages.html 从引爆朋友圈的H5小游戏<围住神经猫>,到颠覆传统广告的大众点评H5专题页& ...

  2. APP分享视频H5页面

    男左女右中国APP需要做一个APP分享视频H5页面,效果图见下面的图. 出现的问题: (1)URL参数为中文的时候乱码: (2)vedio点击默认是QQ,微信的播放器: (3)给视频添加一个默认的封面 ...

  3. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  4. 教你判断一个APP页面是原生的还是H5页面 。(还没看)

    来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...

  5. 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...

  6. Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

    pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...

  7. 如何判断一个 APP页面是否是H5页面

    1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...

  8. 编写第一个H5页面

    <!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第 ...

  9. 如何判断一个 APP页面是否是H5页面(转载)

    1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...

随机推荐

  1. Linux下TomcatVM参数修改:Native memory allocation (mmap) failed to map 3221225472 bytes for committing reserved memory.

    不可行的方法最初我直接修改catalina.sh, 将JAVA_OPTS变量加上了 -server -Xms1G -Xmx1G -XX:+UserG1GC最初看起来没啥问题,但是当服务器运行几天后,发 ...

  2. Neutron 理解 (8): Neutron 是如何实现虚机防火墙的 [How Neutron Implements Security Group]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  3. Facebook不相信所谓的员工能力等级。《长效商业英雄》(《哈佛商业评论》2016年11期),4星。

    老牌管理杂志.本期我给4星.以下是书中一些信息的摘抄: 1:爱因斯坦曾说:“任何傻瓜都能让事情更复杂,只有天才能让事情变简单.”单就这一点来看,乔布斯无疑是天才中的天才.#137 2:通过让苹果聚焦于 ...

  4. 不要让catalogs搞死你的eclipse

    不要让catalogs搞死你的eclipse 楼主终于走出校园,踏上软件职场之路.新人要学的东西有很多,要战胜的东西很多,这些东西除了技术本身,还有对未知领域的恐惧,新接触技术,比如新的框架,可能好几 ...

  5. 转: Protobuf 的 proto3 与 proto2 的区别

    Protobuf 的 proto3 与 proto2 的区别   On 2015-07-17 19:16:00 By Soli   Protobuf 的 proto3 与 proto2 的区别 这是一 ...

  6. WebApi2跨域问题

    一.跨域问题产生的原因:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能. 现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域 ...

  7. 原创jquery插件treeTable(转)

    由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...

  8. windows7配置Nginx+php+mysql教程

    windows7配置Nginx+php+mysql教程 最近在学习php,想把自己的学习经历记录下来,并写一些经验,仅供参考交流.此文适合那些刚刚接触php,想要学习并想要自己搭建Nginx+php+ ...

  9. 深入理解Java:内部类

    什么是内部类? 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public ...

  10. 第一章,阿里的Dubbo完美初级搭建,待续。。。

    1.1 后台工程搭建分析 Web工程. Maven的常见打包方式:jar.war.pom Pom工程一般都是父工程,管理jar包的版本.maven插件的版本.统一的依赖管理.聚合工程. Taotao- ...