直接上代码：
html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="contain1">
<div class="cdd">
<div class="contain"></div>
几张图片
</div>
</div>
<script type="text/javascript" src="js/flexible.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
css:
/*
* @Author: anchen
* @Date: 2016-11-01 09:19:58
* @Last Modified by: anchen
* @Last Modified time: 2016-12-15 14:27:15
*/
body,html {
width:100%;
height:100%;
}
.contain1 {
height:100%;
perspective: 2600px;
transform-style: preserve-3d;
}
.cdd {
width:100%;
height:100%;
perspective: 2600px;
transform-style: preserve-3d;
}
.contain {
width:100%;
height:100%;
background: url('../images/3.jpg')no-repeat -4.61rem -1.87rem;
background-size: cover;
transform: translateZ(0 px);
}
.men {
position: absolute;
bottom: 38%;
right: 3.25rem;
width:3.47rem;
height:3.47rem;
transform: translateZ(885px);
}
.heye {
position: absolute;
bottom: 26%;
left: 2rem;
width:4.5rem;
height:4.5rem;
transform: translateZ(688px);
}
.shui {
position: absolute;
bottom: 25%;
left: 1.5rem;
width:6.5rem;
height:4.5rem;
transform: translateZ(686px);
}
.yu {
position: absolute;
bottom: 33%;
width:2.5rem;
height:2.5rem;
transform: translateZ(716px);
}
.xiaoniao {
position: absolute;
bottom: 34%;
right: 1.5rem;
width:5.5rem;
height:5.5rem;
transform: translateZ(585px);
}
.zuzi {
position: absolute;
bottom: 36%;
left: 3rem;
width:2.5rem;
height:2.5rem;
transform: translateZ(559px);
}
.meizi {
position: absolute;
bottom: 40%;
left: 1rem;
width:4.5rem;
height:2.5rem;
transform: translateZ(272px);
}
.meihua {
position: absolute;
bottom: 60%;
right: 1rem;
width:5.5rem;
height:3.5rem;
transform: translateZ(279px);
}
.hudie {
position: absolute;
bottom: 48%;
left: 4.5rem;
width:1.5rem;
height:1.5rem;
transform: translateZ(272px);
}
.bailu {
position: absolute;
bottom: 45%;
right: 0.1rem;
width:5.5rem;
height:3.5rem;
transform: translateZ(100px);
}
.long {
position: absolute;
bottom: 73%;
left: 1.5rem;
width:2.5rem;
height:2.5rem;
transform: translateZ(0px);
}
js:
/*
* @Author: anchen
* @Date: 2016-11-01 09:19:58
* @Last Modified by: anchen
* @Last Modified time: 2016-12-15 16:23:11
*/
var timer;
var num = 0;
var startY = endY= count = quit = liate = zong = 0;
$('.contain1').on('touchstart', function(event) {
var touchstar = event.targetTouches[0];
startY = touchstar.pageY;
});
$('.contain1').on('touchmove', function(e) {
var touch = e.touches[0];
endY = touch.pageY;
count = endY - startY;
quit = startY - endY;
zong = zong + count;
liate = liate + quit;
if (count > 0) {
if (quit < 0) {
$('.cdd').css({
transform:'translateZ('+ -zong + 'px)'
})
}else {
$('.cdd').css({
transform:'translateZ('+ liate + 'px)'
})
}
}else if(count < 0){
if (quit > 0) {
console.log(liate);
$('.cdd').css({
transform:'translateZ('+ liate + 'px)'
});
}else {
$('.cdd').css({
transform:'translateZ('+ zong + 'px)'
})
}
}
if (-zong <= -4) {
$('.cdd').css({
transform:'translateZ(-4px)'
})
};
if (liate >= 2200) {
$('.cdd').css({
transform:'translateZ(2200px)'
})
};
})
// 禁止微信上下显示黑框
document.querySelector('body').addEventListener('touchstart', function (ev) {
event.preventDefault();
})
实现思路：
主要用到css 3D，值得注意的是，要在父级上加上审查元素的角度的perspective，还有transform-style：指定嵌套元素如何在3D空间中呈现，他主要有两个属性值：flat和preserve-3d。其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。主要还是计算每张图的位置。
github地址：https://github.com/wangruirui007/H5Eye
网友评论