私は自分のページのナビゲーションを設計しようとしていますが、対応するボタン (上、左、右、下)押されている？手伝ってくれますか？
これが私が試しているコードです。最初のスライドは機能しますが、複数のスライドを試すと混乱してしまいます。
<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>