                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

淘寶搜索框

有誰有那個淘寶搜索框的源代碼，可以給我一份嗎？

Granzon

2017-06-16

源自：搜索框制作

關(guān)注問題我要回答

411

操作

收起

1 回答

Granzon 提問者
2017-06-17

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<link href="測試.css" rel="stylesheet" type="text/css">
</head>

<body>
? <div class="search-container">
???? <div id="search_tab" class="search-list">
??????? <ul>
?????????? <li id="tab_1" class="selected"><a href="#">寶貝</a></li>
?????????? <li id="tab_2"><a href="#">店鋪</a></li>
??????? </ul>
???? </div>
???? <div class="search-pannel">
??????? <form>
?????????? <div class="search-tips"><a href="#">高級<br/>搜索</a></div>
?????????? <div class="search-button"><input class="btn-search" type="submit" value="搜索"/></div>
?????????? <div class="search-common-pannel"><input type="text"/></div>
??????? </form>
???? </div>
? </div>
</body>
<script>
var getDOM = function(id){
?? return document.getElementById(id);
?? }?
??
var addEvent = function(id,event,fn){
?? var el = getDOM(id)||document;
?? if(el.addEventListener){
??? el.addEventListener(event,fn,false);
??? }else if(el.attachEvent){
???? el.attachEvent('on'+event,fn);
??? }
?? }
??
addEvent('search_tab','mouseover',function(){
?this.className+=' trigger-hover';
?});
addEvent('tab_1','mouseover',function(){
?if(this.className.indexOf('selected')<0){
?this.className+=' selected';}
?});
addEvent('tab_1','mouseout',function(){
?this.className='';
?});
addEvent('tab_1','click',function(){
?getDOM('search_tab').className = 'search-list';
?});
addEvent('tab_2','mouseover',function(){
?if(this.className.indexOf('selected')<0){
?this.className+=' selected';}
?});
addEvent('tab_2','mouseout',function(){
?this.className='';
?});
addEvent('tab_2','click',function(){
?getDOM('search_tab').className = 'search-list';
?});

</script>
</html>

樣式：

bady{
?font:12px/1.5 tahoma,arial,sans-ser;
?}
a{
?text-decoration:none;
?}
.search-tips{
?float:right;
?padding:3px 0 0 15px;
?}
.search-tips a{
?color:#6c6c6c;
?}
.search-button{
?float:right;
?}
.btn-search{
?width:100px;
?height:45px;
?background:#47c9af;
?border:0 none;
?color:#fff;
?font-size:20px;
?cursor:pointer;
?}
.search-common-pannel{
?height:39px;
?background:#47c9af;
?overflow:hidden;
?padding:3px 0 3px 77px;
?}
.search-common-pannel input{
?height:37px;
?line-height:37px;
?width:100%;
?border:0 none;
?outline:0;
?background:#fff;
?font-size:20px;
?color:#47c9af;
?}
ul{
?list-style:none;
?display:block;
?}
ul,li{
?margin:0;
?padding:0;
?}
.search-list{
?position:absolute;
?top:11px;
?left:10px;
?width:72px;
?height:39px;
?overflow:hidden;
?background:#fff;
?border-left:1px solid #f6f6f6;
?border-right:1px solid #e5e5e5;
?border-bottom:1px solid #e5e5e5;
?}
.search-list li{
?display:none;
?height:39px;
?line-height:39px;
?overflow:hidden;
?text-align:center;?
?}
.search-list li a{
?color:#6c6c6c;
?}
.search-list .selected{
?background:#f6f6f6;
?display:block;
?}
.trigger-hover{
?height:auto;
?}
.trigger-hover li{
?display:block;
?}