先看个简单的,移动设备上,横向滑动内容块的例子:
<head> <style> body,ul,li { padding:10px; margin:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #wrapper { width:300px; height:160px; float:left; position:relative; /* On older OS versions "position" and "z-index" must be defined, */ z-index:1; /* it seems that recent webkit is less picky and works anyway. */ overflow:hidden; background:#aaa; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px; background:#e3e3e3; } #scroller { width:2100px; height:100%; float:left; padding:0; } #scroller ul { list-style:none; display:block; float:left; width:100%; height:100%; padding:0; margin:0; text-align:left; } #scroller li { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; display:block; float:left; width:300px; height:160px; text-align:center; font-family:georgia; font-size:18px; line-height:140%; } </style> <script src="iscroll.js"></script> <script> var myscroll; function loaded() { myScroll = new iScroll('wrapper', { snap: true, hScrollbar: false}); } document.addEventListener("DOMContentLoaded",loaded,false); </script> </head> <body> <div id="wrapper"> <div id="scroller"> <ul> <li><img src="images/1.jpg"></li> <li><em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li> <li><img src="images/2.gif"></li> <li><em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li> <li><img src="images/3.gif"></li> </ul> </div> </div> </body>
此段代码可以实现,在移动设备上,横向滑动内容块的效果。
关于iscroll的参数浅析,实际中一些兼容问题,在下次文章中来学习。