<body>
<aside class="sidebar"></aside>
<section class="wrapper">
<input type="button" id="button" class="button" value="点击">
</section>
</body>
<style type="text/css">
*{ padding: 0; margin: 0;}
html, body{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.wrapper{ position: relative; width: 100%; height: 100%; overflow-y: auto; transition: all linear .2s; }
.sidebar{ position: absolute; top: 0; right: 0; z-index: 100; width: 200px; height: 100%; overflow-y: auto; background-color: #666; transform: translate3d(200px,0,0); transition: all linear .2s; }
.button{ float: right; margin: 10px; }
.open .sidebar{ transform: translate3d(0,0,0); }
.open .wrapper{ transform: translate3d(-200px,0,0); }
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$('#button').click(function() {
$('body').toggleClass('open');
});
</script>
5581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
