`
yuanke
  • 浏览: 69702 次
  • 性别: Icon_minigender_2
  • 来自: 临沂
社区版块
存档分类
最新评论

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>

分享到：
| Extjs学习总结之EditGridPanel可编辑表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics