这个搜索页面是如何实现的(javascript,css,jquery?)?

时间:2011-11-29 09:05:38

标签: javascript jquery css forms search

http://designspiration.net - 如果您点击页面顶部的搜索,您会看到一个非常酷的最小搜索表单,但我无法找到他们是如何做到的。有谁知道/有没有人能找出使用的是什么?感谢

2 个答案:

答案 0 :(得分:6)

用CSS和jQuery完成,实际上非常简单。 我在jsFiddle上创建了一个示例,演示如何完成它:

$(document).ready(function(){
    var $overlay = $('#overlay');
    $('#search').click(function(){
        if ( $overlay.is(':visible') ) {
            $overlay.fadeOut();
        } else {
            $overlay.fadeIn();
        }           
    });

    $('#close').click(function(){
        $overlay.fadeOut();
    });

});

看看这里:http://jsfiddle.net/peduarte/VeRMW/

主要功能包括clickfadeInfadeOut

答案 1 :(得分:2)

它使用整个页面上的叠加层和没有边框的大文本字段搜索输入和一些建议

你可以通过jQuery& CSS