0

我正在尝试为我的页面设计一个导航，我想知道是否有人知道如何创建来自页面顶部、左侧、右侧和底部的滑动 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>
4

1 回答 1

1

试试 jquery .slideDown() .slideUp()

http://api.jquery.com/slideDown/

于 2012-03-27T18:40:05.893 回答