用到了两个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: 0; padding: 0; } 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() - 200); $(window).resize(function () { $('.page').css('left', width + "px"); width = $(window).width(); $("#container").height($(window).height() - 200); }); $("button").each(function (i) { i = i + 1 $("#btn" + i).click(function () { $(".page").stop(false, true).not('.page' + i).animate({ left: -2*width }, 1000, function () { $(".page").not('.page'+i).css("left", width); }); $(".page" + i).animate({ 'left': [0, 'easeOutBack'] }, 1000) }); }); }); </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"> 1111111111111111111111111111111111 </div> <div class="page page2"> 2222222222222222222222222222222222222 </div> <div class="page page3"> 33333333333333333333333333333333333333 </div> <div class="page page4"> 4444444444444444444444444444 </div> </div> <div id="footer"> <p> 版本信息：：：：： </p> </div> </body> </html>