iscroll实现触屏滚动

作者:林炜贤来源:www.163css.com发表时间:(2013-01-07)

 之前我们做过几个例子,都是用来实现类似滚动条的触屏例子。最初是“touchScroll实现手机触屏滚动”以及“touchSwipe实现手机触屏滚动”,我们会发现,我们可以通过不同的代码实现同一功能,其实,这东西,我们在PC上叫作滚动条,但我们在IOS及android上的应用是挺多的,因为大家都喜欢触屏的感觉,那么,我们在WEBAPP中,也要把这种体验用上去吧,不然,就落后了。。。

有兴趣的朋友先看下这个地址:“https://github.com/cubiq/iscroll”,在这里,可以下载到iscroll的最新文件,说实话,像github这种网站,真是牛啊,集中了大量的代码。。。

像这样的模式,跟我们之前的touchscroll是不是很像?

都是通过实例化,说明面像对像的写法,在JS中也是大量使用啊。。。

我们可以看到在iscroll中,我们有一个useTransition:true这样的代码,这个采用了css3中的transition,也许webkit上的东西,transition让我们的滑动更加舒服。

 DOMContentLoaded,这东西的用法,我百度了一下,才知道:

与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2013/01/iscroll_tran/index.html

下载地址:iscroll实现触屏滚动.rar

返回作者主页:www.163css.com阅读 (9379)
更多 1