                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

淘宝搜索框

有谁有那个淘宝搜索框的源代码，可以给我一份吗？

Granzon

2017-06-16

源自：搜索框制作

关注问题我要回答

434

操作

收起

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;
}