手机网页html5+css3实现相册特效
相关:在线浏览器html5评分测试 下面代码运行要在支持html5+css3的浏览器运行代码
<!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>iScroll demo: carousel</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: 240px;
margin: 0 auto;
background: #444;
overflow: hidden;
}
#wrapper {
width: 200px;
height: 240px;
margin: 0 auto;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 800px;
height: 240px;
-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: 200px;
height: 240px;
float: left;
}
.painting {
width: 140px;
height: 200px;
border-radius: 10px;
margin: 20px auto;
border: 1px solid #000;
box-shadow:
inset 2px 2px 6px rgba(255,255,255,0.6),
inset -2px -2px 6px rgba(0,0,0,0.6),
0 1px 8px rgba(0,0,0,0.8);
}
.giotto {
background: url(http://gi2.md.alicdn.com/bao/uploaded/i2/TB1KChvHXXXXXbPXpXXXXXXXXXX_!!0-item_pic.jpg_200x200q90.jpg) no-repeat;
}
.leonardo {
background: url(http://gi2.md.alicdn.com/bao/uploaded/i2/TB1p9VGHpXXXXbTXXXXXXXXXXXX_!!0-item_pic.jpg_200x200q90.jpg) no-repeat;
}
.gaugin {
background: url(http://gi4.md.alicdn.com/bao/uploaded/i4/TB1wkQsHpXXXXXXXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q90.jpg) no-repeat;
}
.warhol {
background: url(http://gi1.md.alicdn.com/bao/uploaded/i1/TB1yC_CHpXXXXaXXpXXXXXXXXXX_!!0-item_pic.jpg_200x200q90.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>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢