0
나는 내 페이지에 대한 탐색을 디자인하려고하고 있는데, 그 사람이 해당 페이지의 위쪽, 왼쪽, 오른쪽 및 아래쪽에서 오는 슬라이딩 div를 만드는 방법을 알고 있다면 궁금합니다. 해당 버튼 (위쪽, 왼쪽, 오른쪽, 아래쪽)을 눌렀습니까? 도울 수 있니?웹 사이트에서 여러 슬라이딩 divs
다음은 내가 시도하는 코드입니다. 나는 일에 첫 번째 슬라이드를 얻을 수 있지만, 여러 슬라이드를 시도하는 것은 혼란 저를 얻었다 :
<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>