H5页面实现原理分析

<!doctype html>

<html>

<head>

<style>

html{overflow:hidden;}

body{margin:0;}

.w img{width:100%;height:100%;}

</style>

<script src="jquery.js"></script>

<meta charset="UTF-8">

<title>H5页面实现原理分析</title>

</head>

<body>

<div class="w">

<div><img src="images/p1.jpg"></div>

<div><img src="images/p2.jpg"></div>

<div><img src="images/p3.jpg"></div>

<div><img src="images/p1.jpg"></div>

</div>

<script>

var wHeight = $(window).height();/*获取窗体的高*/

$(".w div").height(wHeight);/*设置为窗体高*/

var n=0;/*记录图片位置*/

$("body").click(function(){

if(n<$(".w div").length-1){

n=n+1;/*图片位置加1*/

}else{

$(".w").css({marginTop:0}); /*直接回第1张位置*/

n=1;/*为第2张做准备*/

}

$(".w").stop().animate({marginTop:-wHeight*n});/*对应位置图片显示*/

})

$(window).resize(function(){/*窗口改变大小时*/

wHeight = $(window).height();/*重新获取窗口高*/

$(".w div").height(wHeight);/*重新设置为窗体高*/

$(".w").css({marginTop:-wHeight*n});/*重新放置对应位置图片*/

})

</script>

</body>

</html>

原文发布于微信公众号 - 我分享我快乐(duan_uid)

原文发表时间:2015-05-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券