標題: iScroll 4 - 用 JS 實現手機上的捲軸 [打印本頁]
作者: wmh 時間: 2011-12-31 20:50 標題: iScroll 4 - 用 JS 實現手機上的捲軸
iScroll 4
http://cubiq.org/iscroll-4
用 JS 實現手機上的捲軸
消失的捲軸
手機版的 webkit 在 overflow: scroll 時，並不會顯示捲軸 (iOS 5 以前)，沒有特別說明的話，使用者還真的不知道那一塊內容是可以捲動的呢。現在透過 iScroll 4 可以用 JavaScript 來模擬出手機上原生的捲動效果囉。
下載
使用
HTML 的部份是這樣的：
<div id="wrapper">
<ul>
<li></li>
...
...
</ul>
</div>
其中 #wrapper 是捲動的區域(範圍)，底下的第一個元素 ul 是捲動的內容。
程式的部份如下：
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded);
在 DOMContentLoaded 的事件內，new 一個 iScroll 物件，帶入該元素的 id 即可。
如果你用 jQuery，也可以這樣做：
$(function () {
myScroll = new iScroll('wrapper');
});
範例
直接玩玩看下面的捲動效果吧～～
[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]
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|