1. 首页
  2. 问答
  3. 使用javascript的滑动页面？

使用javascript的滑动页面？

2010-05-11 48 views

回答

2

下面是使用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'}); 
});

来源

2010-05-11 02:32:28 Adam

相关问题

 相关问题