需求是实现像chrome那样，左右切换app的页面效果。
代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Multi-page template</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <style type="text/css"> .thumbnail { float: left; width: 64; border: 1px solid #999; margin: 0 15px 15px 0; padding: 5px; } </style> </head> <body> <!-- Start of first page: #one --> <div data-role="page" id="one"> <div data-role="content"> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/1.png" alt="" width="64" height="64" /><br> icon 1 </div> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/2.png" alt="" width="64" height="64" /><br> icon 2 </div> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/3-icon.png" alt="" width="64" height="64" /><br> icon 3 </div> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/4.png" alt="" width="64" height="64" /><br> icon 4 </div> <a href="#two" data-role="button" data-transition="slide" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"> <div class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-r ui-icon-shadow "> </div> </a> </div> <!-- /content --> </div> <!-- /page one --> <!-- Start of second page: #two --> <div data-role="page" id="two"> <div data-role="content"> <h2> Two</h2> <div data-role="content"> <a href="#one" data-role="button" data-transition="slide" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"> <div class="ui-btn ui-btn-icon-left ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-l ui-icon-shadow "> </div> </a> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/5.png" alt="" width="64" height="64" /><br> icon 5 </div> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/6.png" alt="" width="64" height="64" /><br> icon 6 </div> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/7-icon.png" alt="" width="64" height="64" /><br> icon 7 </div> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/8.png" alt="" width="64" height="64" /><br> icon 8 </div> <a href="#three" data-role="button" data-transition="slide" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"> <div class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-r ui-icon-shadow "> </div> </a> </div> <!-- /content --> </div> <!-- /page three --> </div> <!-- Start of second page: #three --> <div data-role="page" id="three"> <div data-role="content"> <h2> three</h2> <a href="#two" data-role="button" data-transition="slide" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c"> <span class="ui-btn ui-btn-icon-left ui-li-has-arrow ui-li ui-btn-up-c ui-icon ui-icon-arrow-l ui-icon-shadow "> </span> </a> <br class="clearboth"> <div class="thumbnail"> <img src="http://www.cnblogs.com/Content/Images/webstore/9.png" alt="" width="64" height="64" /><br/> icon 9 </div> </div> <!-- /content --> </div> <!-- /page three --> </body> </html>