HTML5应用开发:JavaScript库iScroll教程
目录
1. iScroll介绍
2. 安装和使用
3. 简单的iScroll例子
4. Pinch & Zoom
5. Snap to element
6. iScroll 详细参数
1. iScroll介绍
一般我们在开发传统Web网站时,偶尔会用固定某一区域的宽度/高,然后借用设置这一区域的overflow:scroll,使得其里面超过该区域范围的内容,可以通过移动滚动条来查看。
而在iOS(iOS5以下)的mobile Safari以及Android的浏览器当中,原生不支持页面内任意区域的overflow:scroll这个属性。传统的做法是使用绝对定位的Header以及Footer,然后让整个页面内容可以滚动。iScroll的出现,也是用Javascript来模拟CSS的overflow:scroll属性,解决页面内元素的滚动问题。
由于iScroll本身使用了transform3d的属性来模拟滚动效果,使得它性能上也非常不错,因为这个属性能使用平台提供的硬件加速。在实际使用当中,效果平滑流畅,可以与原生的相媲美。
本文示例代码可以从GitHub下载,地址:https://github.com/cubiq/iscroll。
2. 安装和使用
iScroll的安装非常简单,你只需要从Github下载最新版本,iScroll是一个纯JS库,因此你可以像使用其他JS脚本一样用script标签来包含iScroll.js, 其并不依赖于jQuery或者其他的库文件:
<script type="application/javascript" src="script/iscroll.js"></script>
3. 简单的iScroll例子
本例中,将一步一步地一个通过iScroll模板来实现一个Native App样式的List View。
第一步,在HTML网页中,添加iScroll.js
<script type="application/javascript" src="script/iscroll.js"></script>
第二步,在页面加载完成之后,实例化iScroll,loaded函数,典型代码如下:
1 |
<script type= "text/javascript" > var myScroll; function loaded() { myScroll = new iScroll( 'wrapper' , { checkDOMChanges: true }); } document.addEventListener( 'DOMContentLoaded' , loaded, false ); </script> |
myScroll是一个全局变量,你可以在任何地方使用scroller函数。当DOMContentLoaded触发之后即加载load函数,但是有的时候由于DOM加载需要一段时间,同时加载iScroll的内容可能会导致页面异常,可以为load函数添加一个settimeout,代码如下:
1 |
<script type= "application/javascript" src= "iscroll.js" ></script> <script type= "text/javascript" > var myScroll; function loaded() { setTimeout( function () { myScroll = new iScroll( 'wrapper' ); }, 100); } window.addEventListener( 'load' , loaded, false ); </script> |
第三步,添加HTML元素,本例中,元素包括header,footer,和wrapper(List滚动区域),代码如下:
[xhtml]<div id="header">iScroll</div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> </ul> </div> </div> <div id="footer"></div>[/xhtml]
#wrapper是显示的窗口,# scroller是包含所有list的集合,一般来说scroller比wrapper要大,scroller在wapper中滚动,只有在wapper中的元素才被显示出来。默认情况下,iScroller只会滚动在#wrapper下的第一个元素,如果你有多个元素都需要滚动,请按照下列方式填写:
[xhtml]<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... ... </ul> <ul> <li></li> ... ... </ul> </div> </div>[/xhtml]
第四步,添加样式表CSS:
我们需要header和footer固定,所以他们的样式如下:
[xhtml]#header { position:absolute; z-index:2; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #footer { position:absolute; z-index:2; bottom:0; left:0; width:100%; height:48px; background-color:#222; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background-image:-moz-linear-gradient(top, #999, #666 2%, #222); background-image:-o-linear-gradient(top, #999, #666 2%, #222); padding:0; border-top:1px solid #444; } [/xhtml]
Wrapper区域在header和footer之间,其各元素样式表如下:
[xhtml]#wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:absolute; z-index:1; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } #scroller ul { list-style:none; padding:0; margin:0; width:100%; text-align:left; } #scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; font-size:14px; } [/xhtml]
至此,一个完整的listView形式Web App已经完成,可以在:这里 观看效果。 完整代码如下:
[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: Check DOM Changes</title> <script type="text/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { checkDOMChanges: true }); } document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #header { position:absolute; z-index:2; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #footer { position:absolute; z-index:2; bottom:0; left:0; width:100%; height:48px; background-color:#222; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background-image:-moz-linear-gradient(top, #999, #666 2%, #222); background-image:-o-linear-gradient(top, #999, #666 2%, #222); padding:0; border-top:1px solid #444; } #wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:absolute; z-index:1; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } #scroller ul { list-style:none; padding:0; margin:0; width:100%; text-align:left; } #scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; background-color:#fafafa; font-size:14px; } #myFrame { position:absolute; top:0; left:0; } </style> </head> <body> <div id="header">iScroll</div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> </ul> </div> </div> <div id="footer"></div> </body> </html> [/xhtml]
4. Pinch & Zoom
如果单纯的滚动不能满足应用的需求,list元素不仅需要可以滚动,而且可以进行放大和缩小,iSroll同样提供了Pinch & Zoom的方式。你所需要做的工作只是在Scroller声明的时候添加zoom参数。
var myScroll = new iScroll('wrapper', { zoom: true });
参数zoomMax是指最大允许放大的倍数,默认值是4,用户可以自行定义。
如果想要获得更加流畅的图片放大缩小滚动的效果,推荐使用CSS样式的硬件加速性能,为所有会被缩放的图像添加以下选项:-webkit-transform:translate3d(0,0,0)即可。请注意,使用到硬件加速性能会消耗更多的计算资源,可能导致程序崩溃。
完整demo代码:
[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: zoom</title> <script type="application/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { zoom:true }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li,p { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } ...... head and footer css #wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto; } #scroller { position:relative; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:640px; padding:0; background:#fff; } p { display:block; width:624px; margin-bottom:1em; padding:8px; font-size:14px; } p img { margin:4px 8px; -webkit-transform:translate3d(0,0,0); } </style> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <p><img src="iscroll.jpg" width="100" height="122" alt="iscroll" style="float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p><img src="iscroll.jpg" width="100" height="122" alt="iscroll" style="float:right">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> </div> </div> <div id="footer"></div> </body> </html>[/xhtml]
5. Snap to element
使用snap选项可以在固定的位置之间来回滚动list,类似跑马灯的效果。实现snap效果同样是在iScroll声明的时候添加相应参数,代码如下:
1 |
var myScroll = new iScroll( 'wrapper' , { snap: true , momentum: false , hScrollbar: false , vScrollbar: false }); |
完整demo代码:
[xhtml]<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>iScroll demo: Snap to element</title> <script type="text/javascript" src="../../src/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false }); } document.addEventListener('DOMContentLoaded', loaded, false); </script> <style type="text/css" media="all"> body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #header { position:absolute; top:0; left:0; width:100%; height:45px; line-height:45px; background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); padding:0; color:#eee; font-size:20px; text-align:center; } #header a { color:#f3f3f3; text-decoration:none; font-weight:bold; text-shadow:0 -1px 0 rgba(0,0,0,0.5); } #wrapper { position:absolute; z-index:1; top:45px; bottom:0; left:0; width:100%; overflow:auto; background:#eee; } #scroller { width:800px; float:left; padding:0; } #scroller ul { list-style:none; display:block; float:left; width:100%; height:100%; padding:0; margin:0; border:1px solid #aaa; } #scroller li { display:block; float:left; width:78px; height:78px; line-height:78px; text-align:center; border:1px solid #aaa; background:#ccc; } </style> </head> <body> <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> <li>cell</li> </ul> </div> </div> </body> </html>[/xhtml]
6. iScroll详细参数:
hScroll, 用来锁定水平滚动,默认情况下,水平和垂直滚动都是支持的。如果被设定为false,则不能水平方向滚动.
vScroll, 用来锁定垂直滚动
hScrollbar, 水平的滚动条是否显示选项。.
vScrollbar, 垂直的滚动条是否显示选项.
bounce, enable/disable 当滚动超出范围时,是否有弹跳动画。.
momentum, enable/disable inertia. Default: true. 如果想要节省计算资源,可以设置为false.
lockDirection, 当元素在一个方向滚动时(如水平),另一个方向(如垂直)的滚动会被锁定.
HTML5应用开发:JavaScript库iScroll教程的更多相关文章
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- 18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
- Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- 20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
- HTML5游戏开发系列教程8(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...
- HTML5游戏开发系列教程4(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-4/ 这篇文章是我们继续使用canvas来进行HTML5游戏开发系 ...
- 【转】20个简化开发任务的 JavaScript库
原文出处: codegeekz 译文出处: oschina 所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 J ...
- 5款帮助简化的HTML5 Audio开发的Javascript类库
HTML5的audio标签提供了我们方便控制声音的功能,可是使用原生的HTML5来开发声音或者音乐相关的项目仍旧很的麻烦.在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audi ...
随机推荐
- 转:关掉Archlinux中烦人的响铃
http://www.0597seo.com/?p=461 F**K,在Archlinux中,每当在听音乐,声音开得挺大的,忽然在控制台输错了命令,那可恶的该死的警告声猛的一下总是吓的我精神晃晃(这是 ...
- IP, TCP, and HTTP--reference
IP, TCP, and HTTP Issue #10 Syncing Data, March 2014 By Daniel Eggert When an app communicates with ...
- LeetCode14 Longest Common Prefix
题意: Write a function to find the longest common prefix string amongst an array of strings. (Easy) 这两 ...
- 3.3html学习笔记之链接
iframe 元素会创建包含另外一个文档的内联框架 <iframe src=""/> 跳转链接 <a href="#here" target= ...
- Nodejs新建博客练习(一)安装express并新建项目
安装express npm install -g express-generator 新建工程 express blog //新建项目 cd blog && npm install / ...
- 一次PostgreSql数据迁移,使用nodejs来完成
2014-02-08 XX开放平台不允许使用站外的服务器了,可是我们的app都在站外,数据库也在站外,全都要求迁移到其云主机上(坑爹啊).我们在其云主机上仅有有限的资源,而且也有在运行中的数据库,要做 ...
- mysql表的创建和删除
在创建数据库表时,最好是在编辑器中写好创建表的代码,然后粘贴到命令行中,这样如果有错修改起来方便. 现在来创建一个user表: -- 打开数据库, --后面必须要有空格, 表示注释 USE mydb3 ...
- CF 319C - Kalila and Dimna in the Logging Industry 斜率优化DP
题目:伐木工人用电锯伐木,一共需要砍n棵树,每棵树的高度为a[i],每次砍伐只能砍1单位高度,之后需要对电锯进行充电,费用为当前砍掉的树中最大id的b[id]值.a[1] = 1 , b[n] = 0 ...
- linq to sql 增删改查
ORM<Object Relation Mapping> Linq To Sql: 一.建立Linq To Sql 类 : 理解上下文类: Linq To Sql 类名+context 利 ...
- JavaScript--模块化编程(笔记)
一直对JS都是一知半解,最近遇到这方面问题,所以在网上学习了一下,现在还没有完全明白,先贴出笔记; 第一章 JavaScript模块化编程(一):模块的写法 一 原始写法 // 模块就是实现特定功能的 ...