Question

我想制作一个导航（家庭，媒体，联系......），我希望它像这样如果按Home键，它会在向下滑动中打开主页（页面），这样它就不会使用导航中的任何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>

Answer 1

您应该使用jQuery的内置函数animate()，它将动态更改元素的CSS。您可以控制它们更改的速度以及您希望动画发生的顺序。

要让面板从顶部向下滑动，您必须首先创建面板，其顶部位置等于面板的任何高度的负值。然后使用 animate（）向下/向上移动。

所以在你的代码中，改变：

dotnet-dev

对此：

.panel {
    top: 200px;
}

然后使用Javascript：

.panel {
    top: -843px; /* Height of panel */
}

带图像背景的

jsFiddle

<强>更新

您还可以使用jQuery的offset()函数将div从文档的特定部分下拉。它采用提供的选择器并计算它与文档边缘的距离（以像素为单位）。在这种情况下，您可以将下拉div的顶部位置设置为等于主页按钮的偏移量（同时仍然减去它自己的高度）。

示例：

$(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 javascript css html

使用Button导航打开页面（jquery）

1 个答案: