您的位置：首页 > Web前端

移动web前端开发，页面局部滑动之iscroll框架

2012-08-19 21:55 567 查看

先看个简单的，移动设备上，横向滑动内容块的例子：

<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的参数浅析，实际中一些兼容问题，在下次文章中来学习。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航