一个类似宣传的H5页面

趁着闲置 做了一个H5的页面 感觉不错。

具体效果如下

一个类似宣传的H5页面

框架上我选择

zepto(其实这个可有可无,推荐用原生的最好)

FullPage (感觉挺好用的一个全屏滚动插件 )

pageResponse (H5的一个适配小工具,感觉挺好用)

FullPage

一个类似宣传的H5页面

pageResponse

一个类似宣传的H5页面

页面样式 其实为了方便有些东西直接写在标签中了

一个小小的延时加载

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

上一篇:解决: "E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) ..."


下一篇:java环境变量和查看安装路径