0

对于我正在开发的网站，当您单击隐藏的 div 下拉信息时，我非常想使用与此处http://shop.jack-hughes.com/类似的下拉效果。

我不知道它是否只使用 CSS3 或 Javascript/CSS 谁能指出我正确的方向或告诉我效果的名称；我想很简单，但我一生都找不到另一个例子。

4

4 回答 4

0

他们有一小段 Javascript 可以做到这一点，可以在任何网站上轻松完成。基本上，您需要在页面顶部隐藏一个 div，单击链接后，您只需显示该 div。

他们使用的代码是：

Event.observe('info', 'click', function(){
    $('aside').toggleClassName('open');
});

但是如果你看一下jquery，你会发现元素的操作很容易做到。

他们另外使用的一件事是他们open班级中的 CSS3 过渡：

.aside {
     transition: all 0.3s ease-out 0s
}

这就是导致平滑过渡效果的原因。因此，您可以使用 jQuery 或 CSS3 过渡，两者都提供相同的效果。我会说 CSS3 过渡更好，但是如果某些浏览器不支持过渡，您将再次疏远它们。

于 2013-02-08T16:38:45.073 回答
0

可能使用jQuery。就像是：

http://api.jquery.com/toggle/

于 2013-02-08T16:39:51.573 回答
0

CCS3和js的结合

这是您引用的网站中使用的内容

js：

Event.observe(window, 'load', function () {
    Event.observe('info', 'click', function () {
        $('aside').toggleClassName('open');
    });
});

Event.observe来自 原型框架 - http://prototypejs.org/doc/latest/dom/Event/observe/

例如，jQuery( http://jquery.com/ ) 中的等价物是：

$(document).ready(function () {
    $('.info').click(function () {
        $('aside').toggleClass('open');
    })
});

CSS：

aside.open {
    height: 21.25em;
}

aside {
    position: relative;
    background-color: #3f4642;
    width: 100%;
    color: white;
    letter-spacing: 0.1em;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

HTML 元素是<aside>....</aside>，但如果您选择 div，则没有区别。

于 2013-02-08T16:42:03.060 回答
0

除了 Deif 发现的内容之外，他们还使用 CSS 过渡

transition: all 0.3s ease-out;

并且还为他们的“aside”类使用“::selection”伪类，参见developer.mozilla.org

于 2013-02-08T16:43:29.087 回答