如何使用 JavaScript 创建自己的滑出页面？
最佳答案
这是一个非常简单的解决方案，使用 jQuery 的 animate 方法来处理肉。 (工作 demo 和下面的代码。)
HTML
您需要三个基本元素:容器 (#slideout)、其内容 (#slideout_contents) 和切换按钮 (#slideout_toggle) >).
<body>
<div>Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents.</div>
<div id="slideout">
<div id="slideout_contents">
<a id="slideout_toggle">Open</a>
<h1>Header</h1>
<p>Some text.</p>
<p>Some text.</p>
</div>
</div>
</body>
CSS
您需要将其绝对定位，使其紧贴屏幕的左边缘。
body {
padding: 0px;
margin: 0px;
}
#slideout, #slideout_contents, #slideout_toggle {
background: #000; /* to see it on a blank page */
color: #fff;
position: absolute;
top: 0px;
}
#slideout_contents {
left: -100px; /* adjust these */
width: 100px;
height: 300px;
}
#slideout_toggle {
display: block;
text-decoration: none;
top: 50%;
left: 100px;
width: 50px;
text-align: center;
}
JavaScript (jQuery)
jQuery 的 animate 方法负责剩下的工作。
$('#slideout_toggle').toggle(function(){
$(this).html('Close');
$('#slideout_contents').animate({'left': '0px'});
},function(){
$(this).html('Open');
$('#slideout_contents').animate({'left': '-100px'});
});
关于javascript - 使用javascript的滑出页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2807599/