<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<script src="/jquery-1.9.1.js"></script>
<style>
html,body{ margin: 0px; padding: 0px;} .
new_show_box{ width: 100%; height: 100vh; position: fixed; overflow-y: scroll; -webkit-overflow-scrolling: touch; top:0; left:100%; background-color: #c8c8c8 !important; z-index: 99; }
</style>
<script>
$(function(){
$(".gohitory").click(function () {
$(‘.new_show_box‘).animate({left:"0%"});
})
$(".gohitory1").click(function () {
$(‘.new_show_box‘).animate({left:"100%"},300);
})
})
</script>
</head>
<body>
<a href="#" class="gohitory">展开</a>
<div class="new_show_box">
<a href="#" class="gohitory1">缩进</a> </div>
</body>
</html>
原文：http://www.cnblogs.com/lunbawu/p/7404095.html