我想做一个导航(主页、媒体、联系人...)，我想要这样 如果您按主页，它会在向下滑动中打开主页(页面)，因此它不会在导航中使用任何 href。
再次简单解释: 我有一个带有按钮(图像)的导航，我想单击一个按钮以在向下滑动中打开另一个图像。
是的，我对这一切都很陌生，我想学习，但用谷歌搜索，没有找到任何对我有帮助的东西。
这就是我尝试过的但没有用(没有任何反应):
CSS:
.Home {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
background-image: url("../images/Home.png");
position: absolute;
width: 175px;
height: 60px;
top: 179px;
left: 155px;
z-index:3
}
.Home:hover {
background-image: url("../images/Homeh.png");
position: absolute;
width: 175px;
height: 60px;
top: 178px;
left: 155px;
z-index:2
}
.panel {
background-image: url("../images/Panel.png");
position: absolute;
width: 1699px;
height: 843px;
top: 200px;
left: 120px;
z-index:1
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".Home").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
</head>
<body>
<a><span class="Home"></span></a>
<a><span class="panel"></span></a>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
您应该使用 jQuery 的内置函数 animate() ，这将动态更改元素的 CSS。您可以控制它们变化的速度以及您希望动画发生的顺序。
要让面板从顶部向下滑动，您必须首先创建面板，使其顶部位置等于面板高度的负值。然后使用 animate() 将其向下/向上移动。
所以在你的代码中，改变:
.panel {
top: 200px;
}
对此:
.panel {
top: -843px; /* Height of panel */
}
然后使用 Javascript:
$(document).ready(function() {
(function dropDown() {
$('.home').one('click', function(){
$('.panel').animate({
top: "+=900"
}, 400, function() {
$('.home').one('click', function(){
$('.panel').animate({
top: '-=900'
}, 400, function() {
dropDown();
});
});
});
});
})();
});
jsFiddle有图片背景
更新
您还可以使用 jQuery 的 offset() 使 div 从文档的特定部分下拉。功能。它采用提供的选择器并计算它与文档边缘的距离(以像素为单位)。在这种情况下，您可以将下拉 div 的顶部位置设置为等于主页按钮的偏移量(同时仍然减去它自己的高度)。
例子:
// Height of drop-down element
var height = $('.panel').height();
// Position drop-down element right above target button
var yPosition = $('.home').offset().top - height;
$('.panel').css('top', yPosition+'px');
(function dropDown() {
$('.home').one('click', function(){
$('.panel').css({
'display': 'block',
'opacity': 0
});
$('.panel').animate({
opacity: 1,
top: "+=250"
}, 400, function() {
$('.home').one('click', function(){
$('.panel').animate({
opacity: 0,
top: '-=250'
}, 400, function() {
dropDown();
});
});
});
});
})();
完整演示 - jsFiddle
关于jquery - 使用按钮导航以打开页面(jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34845304/