使用按钮导航以打开页面（jquery）_Jquery_Html_Css_Image_Navigation_Javascript

使用按钮导航以打开页面（jquery）

jquery html css image navigation javascript

使用按钮导航以打开页面（jquery）,jquery,html,css,image,navigation,javascript,Jquery,Html,Css,Image,Navigation,Javascript,我想做一个导航（家庭、媒体、联系人…），我想这样做如果按Home键，它将以向下滑动的方式打开主页（页面），这样它就不会在导航中使用任何href 再次简单地解释：我有一个带按钮的导航（图像）我想单击一个按钮以幻灯片形式打开另一个图像是的，我对这一切都不熟悉，我想学习，但在谷歌上搜索，没有找到任何对我有帮助的东西这是我尝试过的，但没有成功（什么都没有发生）： CSS: .Home { -webkit-transition-duration: 0.4s; /* Safari */

我想做一个导航（家庭、媒体、联系人…），我想这样做如果按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
    }

    <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>

Html:

.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
    }

    <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>


$（文档）.ready（函数（）{
$（“.Home”）。单击（函数（）{
$（“.panel”）。滑动切换（“慢速”）；
});
});

您应该使用jQuery的内置函数，它将动态更改元素的CSS。您可以控制动画的更改速度以及动画的播放顺序

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

因此，在代码中，更改：

.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();
                    });
                });
            });
        });
    })();
  
});

有图像背景

更新

还可以使用jQuery函数从文档的特定部分下拉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();
                });
            });
        }); 
    });
        
})();

完整演示-

因此，我也可以将其用于基于图片的按钮/框？另一种方法是如何让它从与按钮相同的高度滑出，因为我的导航距离顶部为200像素，如果从屏幕顶部滑出，它看起来不太好。我再次更新了我的答案，并提供了一个完整的示例谢谢，这对我很有帮助，但它没有看起来它会淡入我希望它不会淡入我希望它滑到导航下。没问题。再看一次小提琴，让我知道你是不是在找它。