趁着闲置 做了一个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. ununtu设置开机启动服务-手工将Tomcat设为自启动服务

    配置Ubuntu Server,上面装了一Tomcat7,希望在服务器电源打开后,希望没有登录的情况下也可以自动启动Tomcat 1.编写启动文件/etc/init.d/tomcat7 tomcat7 ...

  2. Ubuntu中root用户和user用户

    从user用户切换到root用户 在ununtu系统中缺省用户是user,出于安全考虑,默认时Ubuntu的root用户时没有固定密码的,它的密码是随机产生并且动态改变的. 但是有的时候我们的用户要执 ...

  3. 基本shell编程【2】-服务端发布脚本

    set -x deployBase="/var/lib/tomcat7/webapps" bakBase="/root/bak" echo "auto ...

  4. [django/mysql] 使用distinct在mysql中查询多条不重复记录值的解决办法

    前言:不废话.,直接进入正文 正文: 如何使用distinct在mysql中查询多条不重复记录值? 首先,我们必须知道在django中模型执行查询有两种方法: 第一种,使用django给出的api,例 ...

  5. ASP.NET MVC 5 with EF 6 上传文件

        参考   ASP.NET MVC 5 with EF 6 - Working With Files Rename, Resize, Upload Image (ASP.NET MVC) ASP ...

  6. Map接口,Map.Entry,hashMap类,TreeMap类,WeakHashMap。

    Collection接口之前接触过,每次保存的对象是一个对象,但是在map中保存的是一对对象,是以key->value形式保存的. 定义: public interface Map<K,V ...

  7. ListIterator接口,双向输出。

    1,ListIterator接口与Itreator接口的区别. 2,使用限制. 定义如下: public interface ListIterator<E>extends Iterator ...

  8. alexkn android第一行代码-7.广播

    0.Android 中的广播主要可以分为两种类型,标准广播和有序广播.标准广播(Normal broadcasts)是一种完全异步执行的广播,在广播发出之后,所有的 广播接收器几乎都会在同一时刻接收到 ...

  9. 反射在ADO.NET中的运用(你还在每个项目中循环遍历DataTable吗)

    图片有点大哈,但大更能说明问题.您是不是每个项目都在重复的做图片中的事情-----循环把数据库中返回的表转化为实体对象.是不是每次都在抱怨这样的重复工作.字段越多抱怨越多!不用抱怨了.当你看到这篇文章 ...

  10. linux基础知识与技能3

    3.2.vi的高级使用* 查找在命令模式下,输入/xxx,就可以查找到xxx * 快速切换行在命令模式下,输入:num,就可以快速切换到num行 * 设置显示行号在命令模式下,输入:set nu,就可 ...