用到了两个js库，请自行下载，用到的背景图片可任意图片都可以，主要是看效果
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.3.min.js"></script><script src="js/jquery.easing.1.3.js"></script>
<style>
* {
margin:;
padding:;
}
body {
margin: 0 auto;
}
#header {
height: 100px;
background: #ccc;
}
#footer {
background: #ccc;
height: 100px;
}
#container {
background: url(body_bg.gif);
min-height: 400px;
/*max-height:600px;*/
position: relative;
}
.page {
position: absolute;
width: 100%;
height: 100%;
}
.page1 {
background: url(h.jpg);
}
.page2 {
background: url(a.jpg);
}
.page3 {
background: url(b.jpg);
}
.page4 {
background: url(c.jpg);
}
</style>
<script>
$(function () {
var width = $(window).width();
$('.page').css('left',width+"px");
$("#container").height($(window).height() - );
$(window).resize(function () {
$('.page').css('left', width + "px");
width = $(window).width();
$("#container").height($(window).height() - );
});
$("button").each(function (i) {
i = i +
$("#btn" + i).click(function () {
$(".page").stop(false, true).not('.page' + i).animate({ left: -*width }, , function () {
$(".page").not('.page'+i).css("left", width);
});
$(".page" + i).animate({
'left': [, 'easeOutBack']
}, )
});
});
});
</script>
</head>
<body>
<div id="header">
我是头部
<p>
<button id="btn1">页面1</button>
<button id="btn2">页面2</button>
<button id="btn3">页面3</button>
<button id="btn4">页面4</button>
</p>
</div>
<div id="container">
<div class="page page1"></div>
<div class="page page2"></div>
<div class="page page3"></div>
<div class="page page4"></div>
</div>
<div id="footer">
<p>
版本信息：：：：：
</p>
</div>
</body>
</html>
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
