自己学习过程中关于以后有可能用到的技术的备份,微信广告滑屏组件 iSlider
转载:
iSlider 是个非常平滑的滑块,支持移动端 WebApp,HTML5App 和混合型的 App。
iSlider是移动端的滑动组件的最佳解决方案。他和普通的web 端的滑动插件有很大不同,面向的用户和解决的问题也有很大差别,iSlider 的出现,解决的根本问题是内容的分屏显示,通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决,尽可能的节省内存,提高性能。在功能上iSlider 支持:
图片和dom 两种类型滑动,图片的类型很适合读图类的app,dom 类型则可以根据需要配置成各式各样的webapp
自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调
可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的app,iSlider 提供default,flip,depth,flow, rotate, w等动画方式来丰富你的滑动效果。
iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。
iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置。
而使用iSlider也非常容易上手,你只需要准备一个dom节点用来存放你的slider:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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 数据,数据格式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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 实例化:
1
2
3
4
5
6
7
8
9
10
11
|
< 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 ,预计这些功能会在下一个版本加上。
自己学习过程中关于以后有可能用到的技术的备份,微信广告滑屏组件 iSlider的更多相关文章
- Java学习过程中的总结的小知识点(长期更新)
Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...
- 谨以此篇献给DJANGO学习过程中遇到的问题
谨以此篇献给DJANGO学习过程中遇到的问题 一.Django数据同步过程中遇到的问题: 1.raise ImproperlyConfigured('mysqlclient 1.3.13 or new ...
- 关于JDBC学习过程中的注意事项(分享自己犯过的错误,写给初学JDBC的小伙伴的八条建议)
关于JDBC学习过程中的注意事项(分享自己犯过的错误,写给初学JDBC的小伙伴的八条建议) 前言:最近在学习JDBC,总结了几个小问题,特地分享给大家,让大家不要犯这样的错误,也希望大家养成学会总结的 ...
- 关于《Selenium 2自动化测试实战 基于Python语言》学习过程中键盘的常用操作
下边是自己在学习过程中总结的一些常用键盘的操作
- Mybatis 学习过程中出现空指针异常的错误【已解决】
Mybatis 学习过程中出现空指针异常的错误[已解决] 以下是写的小测试的代码 bean层 Player类(篮球队队员) bean层 Team类(篮球队) dao层 TeamDao.xml配置文件 ...
- 一些JavaSE学习过程中的思路整理(主观性强,持续更新中...)
目录 一些JavaSE学习过程中的思路整理(主观性强,持续更新中...) Java书写规范 IDEA的一些常用快捷键 Java类中作为成员变量的类 Java源文件中只能有一个public类 Java中 ...
- Android中ListView实现图文并列并且自定义分割线(完善仿微信APP)
昨天的(今天凌晨)的博文<Android中Fragment和ViewPager那点事儿>中,我们通过使用Fragment和ViewPager模仿实现了微信的布局框架.今天我们来通过使用Li ...
- WITCH CHAPTER 0 [cry] 绝密开发中的史克威尔艾尼克斯的DX12技术演示全貌
西川善司的[WITCH CHAPTER 0 cry]讲座 ~绝密开发中的史克威尔艾尼克斯的DX12技术演示全貌 注:日文原文地址: http://pc.watch.impress.co.jp/d ...
- centos shell编程6一些工作中实践脚本 nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志 直接送给bc做计算 gzip innobackupex/Xtrabackup 第四十节课
centos shell编程6一些工作中实践脚本 nagios监控脚本 自定义zabbix脚本 mysql备份脚本 zabbix错误日志 直接送给bc做计算 gzip innobacku ...
随机推荐
- python 以标准输出(sys.stdout)为例,看python的标准输入、标准错误输出
看了一个博客,挺不错的.http://www.cnblogs.com/turtle-fly/p/3280519.html 标准输出(sys.stdout)对应的操作就是print(打印)了,标准输入( ...
- HDOJ/HDU 1984 Mispelling4(删除第n个字符~)
Problem Description Misspelling is an art form that students seem to excel at. Write a program that ...
- poj 2451 Uyuw's Concert(半平面交)
Uyuw's Concert Time Limit: 6000MS Memory Limit: 65536K Total Submissions: 8580 Accepted: 3227 De ...
- BAT-使用BAT方法判断网络启动EXE(快捷方式)
原理思路:先启动iNode,如果访问www.baidu.com成功,证明网通了,这时就启动GXT和邮件等.PS:因为对BAT不清楚,所以自己写的东东可能有问题,希望大家有了解BAT的,看一下是否正 ...
- bash shell——与if条件相关的参数意义
最近编写脚本,常看到有 if [ -x $variable ] 类的条件语句,不知道相应参数的意义到底是什么, 特摘录如下:from http://blog.csdn.net/aaaaatiger ...
- PAT 1012. The Best Rank
To evaluate the performance of our first year CS majored students, we consider their grades of three ...
- FZU2132 - LQX的作业(概率论)
Problem Description LQX在做作业时遇到一个难题不会做,请你帮她计算一下:在N个独立地分布于0和1之间的随机变量排为非递减顺序之后,这些变量中第M个小于等于x的概率是多少? Inp ...
- jquerymobile知识点三:弹出层popup
弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...
- Qt编写串口通信程序全程图文解说
(说明:我们的编程环境是windows xp下,在Qt Creator中进行,假设在Linux下或直接用源代码编写,程序稍有不同,请自己修改.) 在Qt中并没有特定的串口控制类,如今大部分人使用的是第 ...
- 将动态库添加到VC程序中
应用程序使用DLL可以采用两种方式:一种是隐式链接,另一种是显式链接.在使用DLL之前首先要知道DLL中函数的结构信息.Visual C++6.0在VC\bin目录下提供了一个名为Dumpbin.ex ...