当前位置: 首页 >> HTML5+CSS3_HTML网站模板_DIV+CSS技术分享 >> 阅读正文

微信h5开发之滑动翻页效果组件推荐:iSlider

如今微信H5开发越来越频繁,很多设计师也开始转行来学习移动H5开发,除了设计一些精美的UI界面以外,自己也想编辑一些高效性能的前端H5代码。

比如目前最常见的 应该是微信h5的滑动翻页效果吧。无论是纵向滑动翻页,还是横向滑动翻页,在配合CSS3动画效果组件就可以快速完成一个绚丽的H5案例。

比如这样的H5的开发案例:比如丽人丽妆2015年招聘的h5页面宣传

%e4%b8%bd%e4%ba%ba%e4%b8%bd%e5%a6%862015%e5%b9%b4%e6%8b%9b%e8%81%98h5%e9%a1%b5%e9%9d%a2

 

今天,25学堂跟爱好微信h5开发的童鞋们分享一个高性能H5全屏滑动组件。

该H5滑动翻页效果组件名称:iSlider   

该H5滑动翻页效果组件的广告语就是:如丝般高性能H5全屏滑动组件

1、简洁, 易用, 半行代码搞定.

2、性能卓越, 如丝般高性能全屏动画滑屏组件.

3、耦合完全分离, 更轻量, 无CSS依赖,无任何js库依赖.

4、一个组件只做一个事情, 专注于页面滑动, 避免冗余 , 保证性能.

 

官网:http://kele527.github.io/iSlider/

 

微信h5开发之滑动翻页效果组件推荐:iSlider的Demo演示:

纵向的H5的滑动效果:可以扫描下面的二维码进行预览。

%e5%be%ae%e4%bf%a1h5%e5%bc%80%e5%8f%91%e4%b9%8b%e6%bb%91%e5%8a%a8%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c%e7%bb%84%e4%bb%b6%e6%8e%a8%e8%8d%90%ef%bc%9aislider-demo

横向的H5的滑动效果:可以扫描下面的二维码进行预览。

%e5%be%ae%e4%bf%a1h5%e5%bc%80%e5%8f%91%e4%b9%8b%e6%bb%91%e5%8a%a8%e7%bf%bb%e9%a1%b5%e6%95%88%e6%9e%9c%e7%bb%84%e4%bb%b6%e6%8e%a8%e8%8d%90%ef%bc%9aislider-demo2

 

2个H5的滑动翻页效果的源码可以参考这2个案例。

DEMO1: 垂直滑动                                    DEMO2: 水平滑动

分为2个步骤来学习和实践:

第一步:打开案例,查看源码。

第二步:复制源码到本地电脑上,自己修改对应的图片和参数即可。当然,这个过程是需要你懂一些基本的前端代码知识。

第三步:这个不太会用,可以用这个H5滑动插件

一直用的是swiper.js这个, 感觉很不错。

官方地址:http://www.idangero.us/swiper
中文地址:http://www.swiper.com.cn

 

如果还有不明白的,可以加25学堂的群来咨询。

 

 

本文标题:微信h5开发之滑动翻页效果组件推荐:iSlider

本文地址:http://www.25xt.com/html5css3/13894.html

本文关键词: , , , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。