H5页面实现原理分析分享
大家一起试试吧
站酷网显示问题：<script>没有空格，黏贴好后记得删掉
<!doctype html>
<html>
<head>
<style>
html{overflow:hidden;}
body{ margin:0;}
.w img{width:100%;height:100%;}
</style>
<s cript src="js/jquery.js"> </s cript>
<meta charset="utf-8">
<title>H5页面实现原理分析</title>
</head>
<body>
<div class="w">
<div><img src="images/001.jpg"></div>
<div><img src="images/002.jpg"></div>
<div><img src="images/003.jpg"></div>
<div><img src="images/004.jpg"></div>
</div>
<s cript>
var wHeight=$(window).height();
$(".w div").height(wHeight);
var n=0;
$("body").click(function(){
if(n<$(".w div").length-1){
n=n+1;
}else{
$(".w").css({marginTop:0});
n=1;
}
$(".w").stop().animate({marginTop:-wHeight*n});
})
$(window).resize(function(){
wHeight=$(window).height();
$(".w div").height(wHelght);
$(".w").css({marginTop:-wHeight*n});
})
</s cript>
</body>
</html>
