html5+css3实现触屏左右滑动焦点图特效

| 阅读数:--次| 作者:小猪仔
摘要:支持手机上的所有浏览器,还支持电脑端的谷歌浏览器

相关:在线浏览器html5评分测试 下面代码运行要在支持html5+css3的浏览器运行代码

html5代码
运行代码
<!DOCTYPE html>
<html>
<head>
<meta 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">

<title>手机焦点图webkfa</title>

<script type="text/javascript" src="http://statics.webkfa.com/js/iscroll5.js"></script>

<script type="text/javascript">

var myScroll;

function loaded () {
	myScroll = new IScroll('#wrapper', {
		scrollX: true,
		scrollY: false,
		momentum: false,
		snap: true,
		snapSpeed: 400,
		keyBindings: true,
		indicators: {
			el: document.getElementById('indicator'),
			resize: false
		}
	});
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>

<style type="text/css">
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-ms-touch-action: none;
}

body, ul, li {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-size: 12px;
	font-family: ubuntu, helvetica, arial;
	overflow: hidden; /* this is important to prevent the whole page to bounce */
}

#viewport {
	position: relative;
	width: 320px;
	height: 320px;
	margin: 0 auto;
	background: #444;
	overflow: hidden;
}

#wrapper {
	width: 320px;
	height: 320px;
	margin: 0 auto;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 1280px;
	height: 320px;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
	background-color: #444;
}

.slide {
	width: 320px;
	height: 320px;
	float: left;
}

.painting {
	width: 320px;
	height: 320px;
}

.giotto {
	background: url(http://gi2.md.alicdn.com/bao/uploaded/i2/TB1KChvHXXXXXbPXpXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;
}

.leonardo {
	background: url(http://gi2.md.alicdn.com/bao/uploaded/i2/TB1p9VGHpXXXXbTXXXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;
}

.gaugin {
	background: url(http://gi4.md.alicdn.com/bao/uploaded/i4/TB1wkQsHpXXXXXXXVXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;
}

.warhol {
	background: url(http://gi1.md.alicdn.com/bao/uploaded/i1/TB1yC_CHpXXXXaXXpXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;
}

#indicator {
	position: relative;
	width: 110px;
	height: 20px;
	margin: 10px auto;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);
}

#dotty {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #777;
}

</style>
</head>
<body onload="loaded()">

<div id="viewport">
	<div id="wrapper">
		<div id="scroller">
			<div class="slide">
				<div class="painting giotto" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3DVICtvBRjhd3ghojqVNxKsaj7aemm3RqwAdcPAzm7QvSLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg252zljILeUsCJjU1rGI%252FCdg%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>
			</div>
			<div class="slide">
				<div class="painting leonardo" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3DgnVnQg%252B7R266k0Or%252B%252BH4tJUNOtS%252ByOHUog%252F3K1zSOxCLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg2ThPxtthXNEcSylKFLQGPZA%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>
			</div>
			<div class="slide">
				<div class="painting gaugin" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3DNzTlGEruIm%252B6k0Or%252B%252BH4tNH8sKeq0nsMHF349Ju02cmLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg2152ioe3eV9CWdwoF8TjZ%252FA%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>
			</div>
			<div class="slide">
				<div class="painting warhol" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3Df%252BqcdSGgCEm6k0Or%252B%252BH4tJrXuYH566UyLkbXnAd2OqmLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg2WKmK4Du%252BRklnKKbQjb4E2g%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>
			</div>
		</div>
	</div>
</div>

<div id="indicator">
	<div id="dotty"></div>
</div>
<p style="margin:0 auto;width:320px;">这个代码主要是为了做手机网页的</p>
</body>
</html>

返回顶部
学到老代码浏览 关闭浏览