Question

很简单，我想知道如何做到这一点'http://www.lido-troon.co.uk/'。

说“预订餐桌”。此触发器允许下拉界面动画，就像从上面开始一样。

我对那里的预订系统不感兴趣，只是功能。

我认为可以使用锚点和平滑滚动来完成，但这意味着预订表格始终存在。

Answer 1

我会给你一个代码，将这个div放在每个屏幕的屏幕顶部，并将div从顶部向下滑动：

HTML：

<div id="ID_NAME">Your Content</div>

JQuery的：

jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top","-100px"); 
   this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");return this;
 }
$(document).ready(function(){
   $('#ID_NAME').center().delay(300).animate({'top' : '0px'});
});

希望这有帮助

Answer 2

创建内容，然后使用JQuery显示它：

http://api.jquery.com/show/

Answer 3

您可以使用jQuery's hide()隐藏预订系统内容的顶部div，而不是按钮{标签.click()，请slideDown()

示例：

$(document).ready(function() {
    $('booking_div').hide();
    $('booking_a').click(function() {
        $('booking_div').slideDown();
    });
});

Answer 4

你可以使用javascript，Jquery。有很多UI效果。它好用且易于使用。你可以从文档中学习它。例如http://www.webdesignersblog.net/coding/20-advanced-jquery-effects/ http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

Answer 5

是的，你可以，使用style =“display：none;”在页面顶部创建div或者使用style属性中的css设置类。然后将事件点击附加到您的链接并动画更改。

<强>的JavaScript

   $('#your_link_button').click(function()
        {
            $("#container").slideToggle('slow');          

        });

<强> CSS

.hidden { display: none; }

<强> HTML

<body>
<div id="container" class="hidden">your content</div>
...

使用javascript从页面顶部下拉界面

5 个答案: