js jq实现百度搜索框
废话 ，我就不多说了，直接上代码
首先是html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿浏览器主页搜索</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="logo" style="background-image: url(img/baidu.png)"></div>
<div class="input">
<input type="text" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input">
<div class="picker">百度</div>
<ul class="picker-list">
<li style="background-image: url(img/ico_baidu.png)" data-logo="baidu.png">百度</li>
<li style="background-image: url(img/ico_sogou.png)" data-logo="sogou.png">搜狗</li>
<li style="background-image: url(img/ico_bing.png)" data-logo="bing.png">bing</li>
<li style="background-image: url(img/ico_google.ico)" data-logo="google.png">Google</li>
</ul>
<div class="hot-list"></div>
</div>
<div class="search"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(function(){
helangSearch.init();
})
</script>
</body>
</html>
下面是css的
body{
padding: 0;
margin: 0;
font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
}
.container{
width: 590px;
margin: 0 auto;
padding-top: 100px;
position: relative;
}
.container:after{
content: '';
display: block;
clear:both;
}
.container>div{
float: left;
}
.container .logo{
width: 100%;
height: 120px;
margin: 0 auto 10px;
background-position: center;
background-repeat: no-repeat;
background-size: auto 120px;
}
.container .input{
position: relative;
width: 500px;
height: 44px;
border-top: #ccc solid 1px;
border-right: none;
border-bottom: #ccc solid 1px;
border-left: #ccc solid 1px;
border-radius: 4px 0 0 4px;
}
.container .input>input{
outline: none;
border: none;
padding: 0 80px 0 10px;
margin: 0;
height: 44px;
width: 410px;
color: #333;
font-size: 16px;
border-radius: 4px 0 0 4px;
}
.container .input>input::-webkit-input-placeholder{
color:#999;
}
.container .input .picker{
width: 40px;
padding-right: 30px;
position: absolute;
top: 0;
right: 0;
height: 100%;
line-height: 44px;
cursor: pointer;
color: #999;
font-size: 12px;
text-align: right;
background-image: url("../img/down.png");
background-position: 50px center;
background-repeat: no-repeat;
user-select: none;
}
.container .input .picker-list{
list-style: none;
padding: 5px 0;
width: 100px;
position: absolute;
right: 0;
top: 50px;
margin: 0;
line-height: 26px;
font-size: 12px;
border-radius: 2px;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
background-color: #fff;
display: none;
}
.container .input .picker-list>li{
padding-left: 36px;
background-position: 10px center;
background-repeat: no-repeat;
background-size: 16px auto;
}
.container .input .picker-list>li:hover{
background-color: #ebf1f5;
cursor: pointer;
}
.container .input .hot-list{
padding: 10px 0;
width: 100%;
position: absolute;
left: 0;
top: 50px;
margin: 0;
line-height: 32px;
font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
background-color: #fff;
display: none;
}
.container .input .hot-list>a{
display: block;
color: #333;
text-decoration: none;
padding: 0 10px;
overflow: hidden;
}
.container .input .hot-list>a:hover{
background-color: #f3f3f3;
}
.container .input .hot-list>a>div{
float: left;
}
.container .input .hot-list>a>div.number{
text-align: center;
width: 40px;
}
.container .search{
width: 89px;
height: 46px;
background-color: #08f;
background-image: url("../img/search.png");
background-position: center;
background-repeat: no-repeat;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
下面是js在这之前要添加jq的依赖
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
/* 搜索 */
var helangSearch={
/* 元素集 */
els:{},
/* 搜索类型序号 */
searchIndex:0,
/* 火热的搜索列表 */
hot:{
/* 颜色 */
color:['#ff2c00','#ff5a00','#ff8105','#fd9a15','#dfad1c','#6bc211','#3cc71e','#3cbe85','#51b2ef','#53b0ff'],
/* 列表 */
list:[
'网页特效',
'jQuery特效',
'web前端代码',
'图片轮播',
'图片切换',
'响应式布局',
'表单美化',
'评论',
'QQ表情'
]
},
/* 初始化 */
init:function(){
var _this=this;
this.els={
pickerBtn:$(".picker"),
pickerList:$(".picker-list"),
logo:$(".logo"),
hotList:$(".hot-list"),
input:$("#search-input"),
button:$(".search")
};
/* 设置热门搜索列表 */
this.els.hotList.html(function () {
var str='';
$.each(_this.hot.list,function (index,item) {
str+='+item+'" target="_blank">'
+'+_this.hot.color[index]+'">'+(index+1)+''
+''+item+''
+'';
});
return str;
});
/* 注册事件 */
/* 搜索类别选择按钮 */
this.els.pickerBtn.click(function () {
if(_this.els.pickerList.is(':hidden')) {
setTimeout(function () {
_this.els.pickerList.show();
},100);
}
});
/* 搜索类别选择列表 */
this.els.pickerList.on("click",">li",function () {
_this.els.logo.css("background-image",('url(img/'+$(this).data("logo")+')'));
_this.searchIndex=$(this).index();
});
/* 搜索 输入框 点击*/
this.els.input.click(function () {
if(!$(this).val()){
setTimeout(function () {
_this.els.hotList.show();
},100);
}
});
/* 搜索 输入框 输入*/
this.els.input.on("input",function () {
if($(this).val()){
_this.els.hotList.hide();
}
});
/* 搜索按钮 */
this.els.button.click(function () {
var searchArr=['百度','搜狗','必应','谷歌'];
alert(searchArr[_this.searchIndex]+"搜索："+_this.els.input.val());
});
/* 文档 */
$(document).click(function () {
_this.els.pickerList.hide();
_this.els.hotList.hide();
});
/* 搜索按钮 */
}
};
效果图
还要引入几张图片下面自行下载吧
如果有什么不懂可以加入qq群讨论讨论：668535367