奇乐网 - 草根博客网站

依赖jQuery的一段前端搜索框代码片段

admin 79 0

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

今天有收到一封邮件,声称不大懂前端,但是想要扒我meowdata.com在用的搜索框,问我能不能分离代码出来给他,
这个是可以哒!
jQuery_searchform-1024x439.png
CSS代码

#search {position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.7);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;-webkit-transform:translate(0px,-100%) scale(0,0);-moz-transform:translate(0px,-100%) scale(0,0);-ms-transform:translate(0px,-100%) scale(0,0);-o-transform:translate(0px,-100%) scale(0,0);transform:translate(0px,-100%) scale(0,0);opacity:0;display:none;}
#search.open {-webkit-transform:translate(0px,0px) scale(1,1);-moz-transform:translate(0px,0px) scale(1,1);-ms-transform:translate(0px,0px) scale(1,1);-o-transform:translate(0px,0px) scale(1,1);transform:translate(0px,0px) scale(1,1);opacity:1;z-index:106;display:block;}
#search input[type="search"] {position:absolute;top:50%;left:0;margin-top:-51px;width:60%;margin-left:20%;color:rgb(255,255,255);background:transparent;border-top:1px solid rgba(255,255,255,.8);border-bottom:2px solid rgba(255,255,255,.5);border-left:0px solid transparent;border-right:0px solid transparent;font-size:40px;font-family:Roboto;font-weight:300;text-align:center;outline:none;padding:10px;}
#search .close {position:fixed;top:15px;right:15px;opacity:1;font-size:27px;color:#fff;}
#search .close:hover {color:#FC2121;cursor:pointer;}

js代码

$('a[href="#search"]').on('click', function(event) {                    
        $('#search').addClass('open');
        $('#search > form > input[type="search"]').focus();
    });            
    $('#search, #search button.close').on('click keyup', function(event) {
        if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
            $(this).removeClass('open');
        }
    });

前端html代码

//搜索按钮

<a href="#search" class="nav-link"><i class="fa fa-search"></i>Search</a>

//搜索框源码

<div id="search"> 
    <span class="close">X</span>
    <form role="search" id="searchform" method="get" action="">
        <input type="search" name="s" value="" placeholder="输入搜索关键词..."/>
    </form>
</div>

这个就是搜索框的代码片段了,可以自己去美化

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)

选择表情