自己学习过程中关于以后有可能用到的技术的备份,微信广告滑屏组件 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 ...
随机推荐
- VS2015连接Oracle数据库(转)
原文地址:https://xuanwo.org/2016/01/03/vs-oracle-11g 开发环境 宿主机:Win10 + VS2015 + ODP.Net for VS2015虚拟机:Win ...
- [洛谷U990]传递游戏(90分)
[题目描述 Description] n个人在做传递物品的游戏,编号为1-n. 游戏规则是这样的:开始时物品可以在任意一人手上,他可把物品传递给其他人中的任意一位:下一个人可以传递给未接过物品的任意一 ...
- Bzoj 2393: Cirno的完美算数教室 容斥原理,深搜
2393: Cirno的完美算数教室 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 287 Solved: 175[Submit][Status][ ...
- HDU 4722 Good Numbers
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4722 Good Numbers Time Limit: 2000/1000 MS (Java/Othe ...
- hdoj 1698 Just a Hook【线段树区间修改】
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- modelsim使用命令
1. 常用仿真命令 vlib work // 建立work仿真库 vmap work wrok // 映射库 vlog -cover bcest *.v // 加覆盖率分析的编 ...
- python 基础干货 01
赋值的实现 a = 'abc' 1. 在内存中创建了'abc'字符串; 2. 在内存中创建了一个名为 a 的变量, 并把它指向刚才创建的'abc', 也就是a中保存着字符串的地址. b = a, 创建 ...
- QT_校园导航(绘制路线已实现)_Updata_详细注释
//MainWidget.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include " ...
- Java NIO使用及原理分析 (四)
在上一篇文章中介绍了关于缓冲区的一些细节内容,现在终于可以进入NIO中最有意思的部分非阻塞I/O.通常在进行同步I/O操作时,如果读取数据,代码会阻塞直至有 可供读取的数据.同样,写入调用将会阻塞直至 ...
- JDBC——事物管理
案例:银行转账问题,数据库如下 相关API setAutoCommit(boolean autoCommit) 将此连接的自动提交模式设置为给定状态.设置事务是否自动提交如果设置为false,表示手 ...