嘿所有,另一個有趣的一個,jQuery的動畫水平滑過
我建設,將整個頁面的整個寬度滑動菜單(寬度:100%;),需要一些幫助。我有一個箭頭按鈕浮動在頁面的右側,將觸發菜單欄點擊時滑出。我希望箭頭按鈕在其前面滑出,並一次性將箭頭圖像更改爲相反的文件。
最大的問題是它們的寬度和高度需要靈活以適應不同的內容。我做了一個微弱的嘗試,但我知道我在這裏錯過了很多因素。我的代碼甚至沒有觸及移動箭頭按鈕以及其餘部分..這不是沒有努力!
任何幫助?謝謝!
HTML:
<div id="main">
<div class="trans" id="trigger">
<img class="arrow_small" src="images/left_small.png" alt="slide out menu" />
</div>
<div id="slider">
<div class="trans" id="overlay"></div>
<div id="content">
<p>this is the content</p>
</div>
</div>
</div>
CSS:
#main {
width:100%;
height:306px;
top:50%;
margin-top:-153px;
position:absolute;
}
#trigger {
width:30px;
height:100%;
float:right;
background-color:#000;
position:relative;
z-index:3;
}
.arrow_small {
position:absolute;
left:50%;
top:50%;
margin-left:-6px;
margin-top:-12px;
}
#overlay {
width:100%;
height:100%;
position:absolute;
}
#content {
width:100%;
height:100%;
position:absolute;
z-index:2;
的Javascript:
$(document).ready(function(){
//hide functions
$('#slider').css('display', 'none');
//menu slide out
$('#trigger').click(function(){
var bar = $('#slider');
bar.show(function(){
this.animate({'marginRight':'100%'},1000);
});
});
});
下面是另一種[橫向頁面滑動]的方法(http://stackoverflow.com/questions/24414642/responsive-horizontal-page-sliding-navigation/24465646#24465646) – 2014-07-08 13:28:30