- 浏览: 150768 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
caibinghong:
Ahua772 写道非常好,谢谢了,但是运行的图片怎么没有加载 ...
用于WebKit的CSS诀窍 -
Ahua772:
非常好,谢谢了,但是运行的图片怎么没有加载出来呢
用于WebKit的CSS诀窍 -
caibinghong:
呃是一个方法,现在改过来了,当时考的时候没有改!现在最底层是i ...
关于innerHTML 赋值问题 -
jayrao5566:
js的正确写法不是 .innerHTML = '<op ...
关于innerHTML 赋值问题 -
caibinghong:
在JQ与EXT里都解决的挺好的。http://caibingh ...
关于innerHTML 赋值问题
iScroll框架解析(翻译)http://cubiq.org/dropbox/iscroll4/examples/simple/
概要
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。
然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力度还不是特别好),Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。
除了以前版本的iScroll的特性以外,iScroll 4还包括如下的特性:
(1)缩放(Pinch/Zoom)
(2)拉动刷新(Pull up/down to refresh)
(3)速度和性能提升
(4)精确捕捉元素
(5)自定义滚动条
友情提示:iScroll 4并不是iScroll 3的简易替代版本,API文档已经不一样了。同时考虑到此版本正处于测试期,一些API
可能会有细微的变化。
使用指南
在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档,可能有点小无聊,但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。
iScroll需要对所要进行滚动的元素进行初始化,并且不限定一个页面中使用iScroll的元素的个数(这里不考虑您的硬件配置)。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。
使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。
最优的使用iScroll的结构如下所示:
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>
在这个小例子中,ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
【注意事项】:
只有wrapper里的第一个子元素才可以滚动,如果你想要更多的元素可以滚动,那么你可以试试下面的这种写法:
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div>
在这个例子中,scroller这个元素可以滚动,即便它包含两个ul元素
iScroll必须在调用之前实例化,你可以在下面几种情况下对iScroll进行实例化:
(1)onDOMContentLoaded
(2)onLoad
(3)以内联inline方式
下面我们逐个来讲讲这三种用法的优缺点
ONDOMContentLoaded
适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸
使用方法:(在head标签中添加如下代码)
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
注意:myscroll这个变量是全局的,因此你可以在任何地方调用它的函数
onLoad
有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的,因此此时页面的资源可能还没有全部加载
完毕。如果你遇到了一些很怪异的行为可以试试下面的写法:
<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},100 );
}
window.addEventListener("load",loaded,false);
</script>
这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的
方式。
inline初始化
这种情况会在页面加载到js的时候就进行调用,此方法不推荐使用,但是很多javascript的大牛都在用这种方式,我又
有什么理由不赞成呢?
<script src="iscroll.js"></script>
<div id="wrapper">
<ul>
<li></li>
...
</ul>
</div>
<script>
var myscroll=new iScroll("wrapper");
</script>
不过建议你使用一些框架的ready方法来安全调用iScroll(比如jquery里的ready())。
iScroll里传递的参数
iScroll里的第二个参数允许你自定义一些内容,比如下面的这段代码:
<script>
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>
第二个参数通常都是一个对象,像上面的这个例子里就设定了不显示滚动条。常用的参数如下:
hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 精致垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fixedScrollbar 在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出
scroller的可见区域。默认在Android上为true, iOS上为false
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹,默认为true
momentum 启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)
为了保持资源的完整性,建议去除滚动条
拉动刷新(pull to refresh)
自从Twitter和一些Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行。你可以看看这儿先一睹为快。
我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作
滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容,不过一旦DOM树发生
了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然,如果
你不想使用这个延迟,那就把setTimeout方法去掉就行了。
缩放(pinch / zoom)
我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放
大和缩小。想要这个功能,只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。
双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能,你至少需要如下配置:
var myScroll =new iScroll("wrapper",{zoom:true});
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项:
zoomMax 指定允许放大的最大倍数,默认为4
【注意事项】:如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说,就是在所有需要缩放的
img元素上使用-webkit-transform:translate3d(0,0,0)来实现,而且尤为重要的是,硬件的加速会占用大量
资源,要谨慎使用,否则你的应用可能就此崩溃。
捕捉元素(snap and snap to element)
捕捉的功能会促使scroller去重新定义位置,这样可以制作更加花哨的传送带效果。点击这里有个小例子。
默认情况下,iScroll将scroller分成四分体,或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的
任何元素,不考虑外部wrapper的大小。如果你想要实现这样的传送带效果,我建议你使用“quadrant”分割。最佳的设
置如下:
var myscroll=new iScroll("wrapper",{
snap:true,
momentum:false,
hScrollbar:false,
vScrollbar: false
});
捕获元素,可以通过传递一个字符串来作为查询条件,如下:
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar:false
});
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素
自定义滚动条(custom scrollbars)
在iScroll 4这个版本中,可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数,如下:
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
});
你可以点击这里看一个小例子,在这个小例子里,myScrollbarH这个类被添加到了水平滚动条上,myScrollbarV这个
类则被添加给了垂直方向上的滚动条上了。需要提醒的是,滚动条是由两个元素组合而成的:容器和显示器。容器同
wrapper的高度相同,而显示器则代表的是滚动条本身。
滚动条的HTML结构如下:
<div class="myScrollbarV">
<div></div>
</div>
.myscrollbarV{
position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
}
.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
border:1px solid #800;
-webkit-background-clip:padding-box;
-webkit-box-sizing:border-box;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
通用方法:
(1)refresh 在DOM树发生变化时,应该调用此方法
(2)scrollTo() 滚动到某个位置
eg: myscroll.scrollTo(0,10,200,true);
(3)scrollToElement() 滚动到某个元素
eg: myscroll.scrolToElement("li:nth-child(10)",100);
(4)detroy() 完全消除myscroll及其占用的内存空间
eg: myscroll.destroy()
发表评论
-
移动web资源整理
2016-05-12 10:42 5482013年初接触移动端,简单做下总结,首先了解下移动we ... -
移动端开发小结
2012-05-17 11:31 10791.viewport viewport就是除去所有工具 ... -
CSS3动画库,很棒哦
2012-05-17 11:30 788官网地址Animate CSS官网地址 Github地 ... -
IOS下Safari渲染Transition时页面闪动Bug
2012-05-17 11:30 5954http://classjs.com/category/tec ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
你需要了解的 10 个 jQuery mobile 贴士和代码片段
2011-09-05 10:45 10881. 一个完整的基本页面 <!DOCTY ... -
[翻译]jQuery Mobile入门教程——主题的使用和定制
2011-09-05 10:42 1250在之前的文章jQuery Mobile 入门教程里,我对j ... -
jQuery Mobile优秀网站及资源汇总贴
2011-09-05 10:18 24071、JQM 案例展示:http://www.jqmgaller ... -
指尖下的js —— 多触式web前端开发之三:处理复杂手势
2011-08-31 10:10 1150指尖下的js —— 多触式web前端开发之三:处理复杂手势 ... -
指尖下的js ——多触式web前端开发之二:处理简单手势
2011-08-31 10:09 1157指尖下的js ——多触 ... -
指尖下的js ——多触式web前端开发之一:对于Touch的处理
2011-08-31 10:08 1260水果公司的那些small an ... -
用于WebKit的CSS诀窍
2011-08-31 09:55 1288使用在WebKit中可用的CSS高级特性,可以为你的网站或 ... -
webkit webApp 开发技术要点总结
2011-08-31 09:51 1430webkit webApp 开发技术要点总结 ...
相关推荐
《jQuery文字平行滚动特效插件liScroll深度解析》 在网页设计中,动态效果往往能提升用户体验,使得网站更具吸引力。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件供开发者使用,实现各种复杂的交互和...
**文件名"cubiq-iscroll-d1e642c"解析:** 这个文件名可能是iScroll4的一个特定版本或分支。"cubiq"是iScroll的原始开发者Matteo Spinelli的网名,"d1e642c"则可能是Git仓库中的一个提交哈希,代表了该版本的源代码...
Vue.js作为一款流行的前端框架,结合Any-Touch手势库,我们可以轻松创建类似IScroll的拖拽和滑动动画效果,而无需引入大量额外的代码。 **IScroll的原理** IScroll的核心在于通过CSS3的`transform`属性的`translate...
4. **滚动插件**:介绍一些流行的滚动库,如iScroll、Perfect Scrollbar等,以及它们的使用方法和优势。 5. **框架集成**:在React、Vue等框架中如何实现自定义滚动效果,使用如react-slick、vue-perfect-scrollbar...
【标题】"安卓Android源码——jqmDemo_static.zip" 提供的是...以上就是关于"安卓Android源码——jqmDemo_static.zip"的详细知识点解析,这个项目提供了一个很好的学习平台,可以深入了解混合式应用开发和移动UI设计。
### Jeesite中Jingle UI帮助文档解析 #### 概述 Jingle UI是一个轻量级的移动WebApp框架,该框架基于HTML5与CSS3技术进行开发,旨在简化移动应用开发过程。Jeesite框架集成Jingle UI,用于开发手机端功能。本文将...
它不依赖任何框架,具有高度灵活性。本篇文章主要介绍了如何利用BetterScroll实现歌词联动功能,允许用户通过拖动歌词来改变播放进度,同时在播放时自动滚动歌词。 首先,了解BetterScroll的核心特性。它借鉴了...
接下来,我们详细解析新闻展示页实现过程中的关键知识点。 首先,构建新闻展示页需要考虑以下几个方面: 1. 需求明确:实现一个新闻展示页,要求新闻分类可以自定义,并且每类新闻的内容和样式可以不同。 2. 数据...
对于前端Web开发,有jQuery插件如Infinite Scroll和iScroll,以及React、Vue、Angular等框架内的组件,如React-Swipeable-Views和vue-infinite-loading。 在PullToRefreshAndLoad-master这个项目中,很可能包含了...
- **JavaScript**:通常使用JavaScript库或框架,如jQuery、React、Vue或Angular,来监听滚动事件,并在达到特定位置时触发刷新请求。例如,`iscroll`和`react-virtualized`等库提供了下拉刷新的功能。 - **CSS**...
- **关键特性**:支持 React、Vue、Angular 等框架。 5. **Scroll Reveal**: - **简介**:零依赖的滚动动画库。 - **应用场景**:适用于需要根据滚动位置展示动画的页面。 - **关键特性**:简单配置即可实现...