iScroll 4 - 用 JS 實現手機上的捲軸
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] iScroll 4[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://cubiq.org/iscroll-4[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 用 JS 實現手機上的捲軸
[b][size=4][color=Indigo]消失的捲軸[/color][/size][/b]
手機版的 webkit 在 overflow: scroll 時，並不會顯示捲軸 (iOS 5 以前)，沒有特別說明的話，使用者還真的不知道那一塊內容是可以捲動的呢。現在透過 iScroll 4 可以用 JavaScript 來模擬出手機上原生的捲動效果囉。
[b][size=4][color=Indigo]下載[/color][/size][/b]
[list]
[*]壓縮檔連結：[url]https://github.com/cubiq/iscroll/zipball/master[/url]
[*]原始碼(github)：[url]https://github.com/cubiq/iscroll[/url]
[/list]
[b][size=4][color=Indigo]使用[/color][/size][/b]
HTML 的部份是這樣的：
[code html]
<div id="wrapper">
<ul>
<li></li>
...
...
</ul>
</div>
[/code]
其中 #wrapper 是捲動的區域(範圍)，底下的第一個元素 ul 是捲動的內容。
程式的部份如下：
[code js]
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded);
[/code]
在 DOMContentLoaded 的事件內，new 一個 iScroll 物件，帶入該元素的 id 即可。
如果你用 jQuery，也可以這樣做：
[code js]
$(function () {
myScroll = new iScroll('wrapper');
});
[/code]
[b][size=4][color=Indigo]範例[/color][/size][/b]
直接玩玩看下面的捲動效果吧～～
[jsg.example]
<style type="text/css">
#isc {
border: 1px solid red;
height: 108px;
width: 500px;
overflow: hidden;
padding: 2px 2px 8px;
position: relative;
z-index:1;
}
#isc ul {
margin: 0;
padding: 0;
width: 3080px;
}
#isc ul li {
float: left;
list-style-type: none;
margin: 0 10px 0 0;
}
</style>
<div id="isc">
<ul>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAafTABI/AAAAAAAAARo/hgW2emjYJr0/s144/P1010355.JPG" width="144" height="108"></li>
<li><img src="http://lh4.ggpht.com/hunter.wu/RKalAQfwABI/AAAAAAAAARw/FdjJA31WEAY/s144/P1010401.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAmRSABI/AAAAAAAAAR4/PlWF4f2jZgk/s144/P1010536.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAo1QABI/AAAAAAAAASA/Q_S6QTQ6LYQ/s144/P1010695.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAumsABI/AAAAAAAAASI/OUGgEIEXwWE/s144/P1010103.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAafTABI/AAAAAAAAARo/hgW2emjYJr0/s144/P1010355.JPG" width="144" height="108"></li>
<li><img src="http://lh4.ggpht.com/hunter.wu/RKalAQfwABI/AAAAAAAAARw/FdjJA31WEAY/s144/P1010401.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAmRSABI/AAAAAAAAAR4/PlWF4f2jZgk/s144/P1010536.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAo1QABI/AAAAAAAAASA/Q_S6QTQ6LYQ/s144/P1010695.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAumsABI/AAAAAAAAASI/OUGgEIEXwWE/s144/P1010103.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAafTABI/AAAAAAAAARo/hgW2emjYJr0/s144/P1010355.JPG" width="144" height="108"></li>
<li><img src="http://lh4.ggpht.com/hunter.wu/RKalAQfwABI/AAAAAAAAARw/FdjJA31WEAY/s144/P1010401.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAmRSABI/AAAAAAAAAR4/PlWF4f2jZgk/s144/P1010536.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAo1QABI/AAAAAAAAASA/Q_S6QTQ6LYQ/s144/P1010695.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAumsABI/AAAAAAAAASI/OUGgEIEXwWE/s144/P1010103.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAafTABI/AAAAAAAAARo/hgW2emjYJr0/s144/P1010355.JPG" width="144" height="108"></li>
<li><img src="http://lh4.ggpht.com/hunter.wu/RKalAQfwABI/AAAAAAAAARw/FdjJA31WEAY/s144/P1010401.JPG" width="144" height="108"></li>
<li><img src="http://lh3.ggpht.com/hunter.wu/RKalAmRSABI/AAAAAAAAAR4/PlWF4f2jZgk/s144/P1010536.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAo1QABI/AAAAAAAAASA/Q_S6QTQ6LYQ/s144/P1010695.JPG" width="144" height="108"></li>
<li><img src="http://lh5.ggpht.com/hunter.wu/RKalAumsABI/AAAAAAAAASI/OUGgEIEXwWE/s144/P1010103.JPG" width="144" height="108"></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jsgears.googlecode.com/svn/trunk/iscroll-4/iscroll.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(function () {
myScroll = new iScroll('isc');
});
</script>
[/jsg.example]
頁:
[1]