今天有收到一封邮件,声称不大懂前端,但是想要扒我meowdata.com在用的搜索框,问我能不能分离代码出来给他,
这个是可以哒!
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>
这个就是搜索框的代码片段了,可以自己去美化
评论(3)