标签：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>楼下100</title>
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
display: block;
}
.x img {
display: block;
width: 100%;
height: 100%;
min-width: 320px;
max-width: 720px;
}
.main {
width: 100%;
min-width: 320px;
max-width: 720px;
height: 480px;
overflow: scroll;
}
.x {
overflow: hidden;
width: 100%;
min-width: 320px;
max-width: 720px;
height: 480px;
background-image: url("images/wapCofBg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content {
width: 100%;
min-width: 160px;
max-width: 320px;
}
.content img {
width: 50%;
min-width: 160px;
max-width: 320px;
display: block;
float: left;
}
em {
transition: width 0.5s;
transition: height 0.5s;
-ms-transition: width 0.5s;
-ms-transition: height 0.5s;
-moz-transition: width 0.5s;
-moz-transition: height 0.5s;
-webkit-transition: width 0.5s;
-webkit-transition: height 0.5s;
box-shadow: 5px 5px 5px 0px #3C3C3C;
line-height: 100%;
background-color: rgb(114, 74, 67);
text-align: center;
color: #FFEFFF;
font-size: 5px;
border-radius: 10px;
position: absolute;
width: 20px;
height: 20px;
right: 40px;
z-index: 100;
}
em:nth-child(1) {
top: 90px;
}
em:nth-child(2) {
top: 120px;
}
em:nth-child(3) {
top: 150px;
}
em:nth-child(4) {
top: 180px;
}
em:nth-child(5) {
top: 210px;
}
em:nth-child(6) {
top: 240px;
}
em:nth-child(7) {
top: 270px;
}
.b {
border-radius: 50px;
height: 30px;
width: 30px;
opacity: 1;
right: 35px;
line-height: 30px;
font-size: 10px;
}
.s {
line-height: 25px;
height: 25px;
width: 25px;
opacity: 0.6;
border-radius: 25px;
}
.x:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="main">
<em>1</em><em>2</em><em>3</em><em>4</em><em>5</em><em>6</em><em>7</em>
<div class="x">
<div class="content">
<img src="images/appCof101.jpg" />
<img src="images/appCof102.jpg" />
<img src="images/appCof103.jpg" />
<img src="images/appCof104.jpg" />
<img src="images/appCof105.jpg" />
<img src="images/appCof106.jpg" />
<img src="images/appCof107.jpg" />
<img src="images/appCof108.jpg" />
</div>
</div>
<div class="x">
<div class="content">
<img src="images/appCof201.jpg" />
<img src="images/appCof202.jpg" />
<img src="images/appCof203.jpg" />
<img src="images/appCof204.jpg" />
<img src="images/appCof205.jpg" />
<img src="images/appCof206.jpg" />
<img src="images/appCof207.jpg" />
<img src="images/appCof208.jpg" />
</div>
</div>
<div class="x">
<div class="content">
<img src="images/appCof301.jpg" />
<img src="images/appCof302.jpg" />
<img src="images/appCof303.jpg" />
<img src="images/appCof304.jpg" />
<img src="images/appCof305.jpg" />
<img src="images/appCof306.jpg" />
<img src="images/appCof307.jpg" />
<img src="images/appCof308.jpg" />
</div>
</div>
<div class="x">
<div class="content">
<img src="images/appCof401.jpg" />
<img src="images/appCof402.jpg" />
<img src="images/appCof403.jpg" />
<img src="images/appCof404.jpg" />
<img src="images/appCof405.jpg" />
<img src="images/appCof406.jpg" />
<img src="images/appCof407.jpg" />
<img src="images/appCof408.jpg" />
</div>
</div>
<div class="x">
<div class="content">
<img src="images/appCof501.jpg" />
<img src="images/appCof502.jpg" />
<img src="images/appCof503.jpg" />
<img src="images/appCof504.jpg" />
<img src="images/appCof505.jpg" />
<img src="images/appCof506.jpg" />
<img src="images/appCof507.jpg" />
<img src="images/appCof508.jpg" />
</div>
</div>
<div class="x">
<div class="content">
<img src="images/appCof601.jpg" />
<img src="images/appCof602.jpg" />
<img src="images/appCof603.jpg" />
<img src="images/appCof604.jpg" />
<img src="images/appCof605.jpg" />
<img src="images/appCof606.jpg" />
<img src="images/appCof607.jpg" />
<img src="images/appCof608.jpg" />
</div>
</div>
<div class="x">
<div class="content">
<img src="images/appCof701.jpg" />
<img src="images/appCof702.jpg" />
<img src="images/appCof703.jpg" />
<img src="images/appCof704.jpg" />
<img src="images/appCof705.jpg" />
<img src="images/appCof706.jpg" />
<img src="images/appCof707.jpg" />
<img src="images/appCof708.jpg" />
</div>
</div>
</div>
</body>
<script src="jquery-1.9.1.js"></script>
<script>
//初始化
$(function() {
var h = $(window).height();
$(".x").css("height", h + "px").parents(".main").css("height", h + "px"); //重置高度
aniList($(".x").eq(0).find("img"));
})
$(function() {
var n = 0, //维护三个状态机
m = 0,
k = 0;
var touchS, touchE; //保留touch的两个状态
var xl = $(".x").length;
var len = $(".main").height(), //总高l + 分高len
l = len * (xl - 1);
ani(0); //初始化ani(0)
$(".main").on("touchstart", function() { //touch->wheel
touchS = event.changedTouches[0].screenY;
});
$(".main").on("touchend", function() {
touchE = event.changedTouches[0].screenY;
touchE - touchS > 0 ? $(".main").trigger("mousewheel", 1) : $(".main").trigger("mousewheel", 0);
})
$(".main").on("mousewheel", function(e, w) {
event.preventDefault();
// alert(n +"&" + m +"&"+k)
var w = w;
// console.log(event.wheelDelta + "&" + w) // console.log(event.changedTouches[0].screenY)
if ((w || event.wheelDelta) > 0 && m === 0) {
m = 1; //分离二号状态机
n > 0 ? n -= len : n = 0; //一号自我维护
$(this).stop(true).animate({
"scrollTop": n,
}, 1000, function() {
m !== 0 ? k-- : k; //根据二号维护三号
k >= 0 ? k < 7 ? k : k = 6 : k = 0; //三号自我维护
aniList($(".x").eq(k).children(".content").find("*")); //进入随机动画通道
ani(k); //进入状态直播机
m = 0; //重置二号的状态码
});
} else if (m === 0) { //二号 比 event 靠谱的时候
m = 1; //分离二号状态机
if (k !== xl) //借助len校验三号
n < l ? n += len : n = l; //触发一号自我维护
$(this).stop(true).animate({
"scrollTop": n,
}, 1000, function() {
m !== 0 ? k++ : k; //根据二号维护三号
k >= 0 ? k < 7 ? k : k = 6 : k = 0; //三号自我维护
aniList($(".x").eq(k).find("img")); //进入随机动画通道
ani(k); //进入状态直播机
m = 0; //重置二号的状态码
});
}
})
})
function ani(k) { //状态直播机
$("em:animated").stop(true);
$("em").removeClass("b").addClass("s");
$("em").eq(k).removeClass("s").addClass("b");
}
function aniList(o) { //随机动画通道
var ran, w, h;
$(o).each(function(i) {
ran = parseInt(Math.random() * 10 / 2);
w = $(this).width();
h = $(this).height();
switch (ran) { //随机动画设置
case 1:
{
$(this).css({
"opacity": "0.6",
"borderRadius": "200px"
}).animate({
"opacity": "1",
"borderRadius": "0px",
}, 1000);
break;
}
case 2:
{
$(this).css({
"marginLeft": -w,
"width": "140%",
}).animate({
"marginLeft": "0px",
"width": "50%",
});
break;
}
case 3:
{
$(this).css({
"opacity": "0.6",
"borderRadius": "200px",
"marginTop": -h,
"height": "60%"
}).animate({
"opacity": "1",
"marginTop": "0px",
"height": "auto",
"borderRadius": "0px"
});
break;
}
case 4:
{
$(this).css({
"marginRight": -w,
"width": "140%"
}).animate({
"marginRight": "0px",
"width": "50%"
});
break;
}
default:
{
$(this).css({
"marginBottom": -h,
"height": "60%"
}).animate({
"marginBottom": "0px",
"height": "auto"
});
break;
}
}
})
}
</script>
</html>
标签：
原文地址：http://www.cnblogs.com/umissthestars/p/4543752.html
