专注于移动端的滑动解决方案 iSlider

MIT
JavaScript
跨平台
百度
2014-11-06
叶秀兰

iSlider 是个非常平滑的滑块,支持移动端 WebApp,HTML5App 和混合型的 App。

17bcfb24c811c39ed58f79d87319a97b

iSlider是移动端的滑动组件的最佳解决方案。他和普通的web 端的滑动插件有很大不同,面向的用户和解决的问题也有很大差别,iSlider 的出现,解决的根本问题是内容的分屏显示,通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决,尽可能的节省内存,提高性能。在功能上iSlider 支持:

  • 图片和dom 两种类型滑动,图片的类型很适合读图类的app,dom 类型则可以根据需要配置成各式各样的webapp

  • 自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调

  • 可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的app,iSlider 提供default,flip,depth,flow, rotate, w等动画方式来丰富你的滑动效果。

  • iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。

  • iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置。

而使用iSlider也非常容易上手,你只需要准备一个dom节点用来存放你的slider:

var data = [{
    height: 414,
    width: 300,
    content: "imgs/1.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/2.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/3.jpg",
}];

然后你需要准备展示的数据,这里展示的数据分两种类型,拿图片类型的slider 举例,你只需要准备好的是图片的json 数据,数据格式如下:

var data = [{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
}];

调用时候,需要对iSlider 实例化:

<script type="text/javascript">
    var islider = new iSlider({
        dom : document.getElementById('iSlider-wrapper'),
        data : data,
        duration: 2000,
        isVertical: true,
        isLooping: true,
        isDebug: true,
        isAutoplay: true
    });
</script>

这样就可以运行一个iSlider 的实例了,关于上面一些参数的意义,可以在官网看到:

http://be-fe.github.io/iSlider/

  • iSlider 的依赖:iSlider 不依赖任何库或是框架,你可以很轻松的把他用在自己的项目中,不会和zepto 或是jqmobi 冲突。

  • 体积大小:iSlider 压缩后代码2kb,你可以很随意的打包在你的项目中。

  • 性能上:iSlider借助了手机硬件加速,所有的动画都尽可能重用dom ,并且使用尽可能少dom 来完成整个渲染,支持无尽的滚动,并且在手指快速滑动中也达到流畅的体验。

未来:

iSlider 还会持续开发,预计会更丰富对dom 类型的支持,方便开发者用iSlider 来build 自己的 app。对图形类型也将支持放大缩小。iSlider目前的版本是 1.0-beta ,预计这些功能会在下一个版本加上。

加载中

评论(2)

g8up
g8up
不能对已有的dom 添加 slide 效果吗?
我不说话
我不说话
不好使

暂无资讯

暂无问答

iSlider 移动端 Webapp 滑动的最优解决方案

关注前端开发,移动前端开发,nodejs,webapp, HTML5, CSS3

2014/11/13 11:39
245
1
前端常用插件、工具类库汇总(上)

前言 在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。 下面这些是我在工作中积...

2018/11/12 10:42
81
0
前端框架

js弹对话框:artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。 js树组件:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种...

2016/11/04 11:58
8
0
日常整理的一些网址,希望对大家有所帮助

手机框架 ratchet 框架 http://cnratchet.com/ jquery mobile 框架 jquerymobile.weebly.com MUI 框架 http://dev.dcloud.net.cn/mui/ SUI Mobile 框架 http://m.sui.taobao.org/ 客户端框架...

2016/03/23 11:29
289
1
百度的71款开源软件

插件: SlipHover(jQuery遮罩插件) wBox(jQuery的弹窗插件) 服务器: Heisenberg(百度mysql分库分表中间件服务器)无语言限制,mysqlclient、c、Java等都可以使用。 解决方案: baidu ...

2016/11/14 13:41
148
0
移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用!

2016/07/21 11:46
47
0
前端文档汇总(含代码规范、开发流程、知识分享,持续更新)

# front-end-Doc 前端文档汇总(含代码规范、开发流程、知识分享,持续更新) [原Github地址]( https://github.com/mgbq/front-end-Doc) 进去后可直接点链接查看文章 综合类 | 地址 --- | --...

2018/06/02 11:02
90
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部