iScroll 捕捉元素源码

最新推荐文章于 2021-08-06 13:58:37 发布

huo_bao

最新推荐文章于 2021-08-06 13:58:37 发布

阅读量635

点赞数

文章标签： iScroll

	<!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: Carousel</title>

	<script type="text/javascript" src="../../src/iscroll.js"></script>

	<script type="text/javascript">
	var myScroll;

	function loaded() {
	myScroll = new iScroll('wrapper', {
	snap: true,
	momentum: false,
	hScrollbar: false,
	onScrollEnd: function () {
	document.querySelector('#indicator > li.active').className = '';
	document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
	}
	});
	}

	document.addEventListener('DOMContentLoaded', loaded, false);
	</script>

	<style type="text/css" media="all">
	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%;
	}

	#nav {
	width:300px;
	float:left;
	}

	#prev, #next {
	float:left;
	font-weight:bold;
	font-size:14px;
	padding:5px 0;
	width:80px;
	}

	#next {
	float:right;
	text-align:right;
	}

	#indicator, #indicator > li {
	display:block; float:left;
	list-style:none;
	padding:0; margin:0;
	}

	#indicator {
	width:110px;
	padding:12px 0 0 30px;
	}

	#indicator > li {
	text-indent:-9999em;
	width:8px; height:8px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	background:#ddd;
	overflow:hidden;
	margin-right:4px;
	}

	#indicator > li.active {
	background:#888;
	}

	#indicator > li:last-child {
	margin:0;
	}

	</style>
	</head>
	<body>
	<div id="wrapper">
	<div id="scroller">
	<ul id="thelist">
	<li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
	<li><strong>2.</strong> <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><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
	<li><strong>Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
	<li><strong>Lyuben Dilov's Forth law:</strong> <em>A robot must establish its identity as a robot in all cases.</em></li>
	<li><strong>Harry Harrison's Forth law:</strong> <em>A robot must reproduce. As long as such reproduction does not interfere with the First or Second or Third Law.</em></li>
	<li><strong>Nikola Kesarovski's Fifth law:</strong> <em>A robot must know it is a robot.</em></li>
	</ul>
	</div>
	</div>
	<div id="nav">
	<div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div>
	<ul id="indicator">
	<li class="active">1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	</ul>
	<div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
	</div>
	</body>
	</html>

huo_bao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iScroll 捕捉元素源码

http-equiv="Content-Type" content="text/html; charset=utf-8"> name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
复制链接

扫一扫