自己学习过程中关于以后有可能用到的技术的备份,微信广告滑屏组件 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 ,预计这些功能会在下一个版本加上。

时间: 2024-10-20 12:00:26

自己学习过程中关于以后有可能用到的技术的备份,微信广告滑屏组件 iSlider的相关文章

OC开发学习过程中的一些小经验

1.引入头文件以及框架 :  @import   XXXX         XXXX表示需要引入的文件/框架2.头文件引用循环:两个头文件相互包含时,将其中一个头文件的类用@class引入3.设置边角幅度 :[  XX.layer setCornerRadius:100 ]  ;    XX表示需要设置边角的对象,一般是给按钮设置,边角幅度大小跟最后数字取值关联.4.多个引号处理方法:引号前加\,如果还有括号影响,就再单独用@“ “将其框起来..专业术语叫转义字符.. 5.在UIWebview中

Qt学习过程中遇到的问题

由于工作需要,开始使用Qt,由于在网上找的教程文档时针对qt3的,所以在学习的过程遇到了许多由于版本不一致造成的问题,因此记录下来. 参考的文档是:Qt入门教程 详细讲解版 本机Qt版本为:Qt5.3.1(windows.Linux(CentOS 6.2)) windows下 1.错误:C1083: 无法打开包括文件:“QApplication”: No such file or directory原因:Qt5里不再用QtGui模块,而是使用QtWidgets模块.解决办法:在工程文件.pro里

android 学习过程中登陆失效的个人理解

今天在学习的过程中,要做登陆失效的功能,所以就找了些资料,好好看了一下,研究了一番,慢慢的做出来了! 比如:你在一个手机端登陆了账号,在另外的一个手机端也登陆了账号,此时,前一个手机端的账号会提示登陆失效. 意思是只能存在一个账号,这个其实不是很难. 每次登陆的时候会存在一个Token,每次登陆的Token是不一样的! 下面贴一下前端的一些小代码: 在异步网络请求里面判断返回的异常是否是登陆失效: @Override protected void onPostExecute(BusinessRe

学习过程中的一些总结,个人观点

这是学习过程中自己总结的一些观点,记录下来,自己多看看,避免重蹈覆辙. ①学知识,有官方中文文档的,那么第一个要选择的资料就是官方API. 因为外面其他的知识都是按照他自己的说法再说,有可能有错误.而官方文档是最好的指导. 下午弄这个全选,官方直接有一个接口,而我到处找资料花了2个多小时.记住咯.

从面相对象的学习过程中得出的程序开发者需要具备的类比学习能力

什么是对象?什么是类?哪些是属性?属性应该设计成什么访问权限?这个类是不是别的类的属性?这些类能不能提取出父类?这里的参数应该设置成什么? 面向对象已经学习了一段时间了,具体使用过程中,发现原来面向对象编程需要接触这么多新鲜的概念.我先给自己打了强心剂:这些概念的提出都是为了让编程更加的方便.还好,虽然"类"这个概念对我来说有些陌生,但我很自然地,把它与我之前接触过的C语言中的结构体联系了起来. 没错,又是C语言,Java学习的过程中,我少不了要提到我亲爱的C语言.这里我不是要讲它们具

iOS学习过程中遇到的一些有用的小功能(持续更新)

这些是我在目前学习UI过程中遇到的一些感觉以后开发会用得比较多的功能. 先把这些收录进来,在接下来的学习过程中如果发现还有用的功能会继续更新下来 因为还是新手,如果有哪些方面有问题请留言告诉我,我会改正 1. //点击键盘上return键后结束编辑,收回底键盘 在.m文件里复写以下方法(要先在头文件里引入协议:UITextFieldDelegate) - (BOOL)textFieldShouldReturn:(UITextField *)textField { [textField resig

iOS学习过程中遇到的一些有用的小功能(8/13更新)

这些是我在目前学习UI过程中遇到的一些感觉以后开发会用得比较多的功能. 先把这些收录进来,在接下来的学习过程中如果发现还有用的功能会继续更新下来 因为还是新手,如果有哪些方面有问题请留言告诉我,我会改正 1. //点击键盘上return键后结束编辑,收回底键盘 在.m文件里复写以下方法(要先在头文件里引入协议:UITextFieldDelegate) - (BOOL)textFieldShouldReturn:(UITextField *)textField { [textField resig

Express4 学习过程中遇到的问题及解决

Express4.9.0学习过程中遇到的问题及解决 1.express 不是内部或外部命令,也不是可运行的程序或批处理文件 关于这个问题首先要确认Express组件是否安装完全,从网上的资料来看,express版本3.5之后,分为两个独立组件包:express 和express-generator,两个组件必须安装. npm install express npm install express-generator 全局安装添加 参数 -g: 安装完成后,目录切换到组件安装位置,应该有expre

谈谈OSSIM学习过程中的提问技巧

谈谈OSSIM学习过程中的一些提问技巧 大家通常在系统出现问题会,会上网寻找答案,比如通过QQ群.百度谷歌或者社区论坛等方式,他们往往将自己的问题粘到网上,一挥手便转身离去,希望能用这种方式直接从对方获取答案. 在专家眼里,你所提出技术问题的解答很大程度上取决于你提问的方式与此问题的难度.对于一些同学在提问前不深入思考,也不做功课的人,随便提出问题,专家们会觉得你不愿意自己付出,在浪费他们的时间,自然也不会得到想要的结果.专家们最喜欢那些真正对问题有兴趣并愿意主动参与解决问题的人,提出有技术含量