0
我想爲我的網頁設計一個nav，我想知道是否有人知道如何創建滑動div來自頁面的頂部，左側，右側和底部，只有當相應的按鈕（頂部，左側，右側，底部）是否被按下？你能幫我嗎？網站上的多個滑動div
這是我正在嘗試的代碼。我能得到的第一張幻燈片工作，但想多張幻燈片已經得到了我困惑：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var $marginLefty = $('#slidemarginleft2 div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});
$('#slidemarginleft2 button').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
$(document).ready(function() {
var $marginTopy = $('#slidemargintop div.topinner');
$marginTopy.css({
marginTop: $marginTopy.outerWidth() + 'px',
display: 'block'
});
$('#slidemargintop button').click(function() {
$marginTopy.animate({
marginTop: parseInt($marginTopy.css('marginTop'),10) == 0 ?
$marginTopy.outerWidth() : 0
});
});
});
</script>
<style type="text/css">
.slide {
background-color: #FFFFCC;
border: 1px solid #999999;
height: 1000px;
width: 100%;
margin: 0;
overflow: hidden;
position: relative;
background-image: url(images/1px.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
.slide .inner {
background-color: #44CC55;
bottom: 0;
left: 0;
color: #333333;
height: 100%;
width: 100%;
padding: 0;
position: absolute;
}
.slide1 .topinner {
background-color: blue;
top: 0;
left: 0;
color: #FFF;
height: 100%;
width: 100%;
padding: 0;
position: absolute;
}
.slide button {
margin: 0.7em 0 0 0.7em;
}
.slide1 button {
margin: 0.7em 0 0 0.7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<div class="slide" id="slidemarginleft2">
<button>right</button>
<button>top</button>
<div class="inner"><button>close</button>Animate this element's margin-left style property(hidden)</div>
<div class="topinner"><button>close</button>Animate this element's margin-left style property(hidden)</div>
</div>
<div class="slide1" id="slidemargintop">
<button>top</button>
<div class="topinner"><button>close</button>Animate this element's margin-left style property(hidden)</div>
</div>
</body>
</html>