您的位置：首页 > Web前端 > JQuery

JavaScript和jQuery实现淘宝搜索栏的制作

2016-03-05 10:14 525 查看

最终效果图如下：

html和JavaScript代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/taobao.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 action="">
<div class="search-tips">
<a href="#">高级<br/>搜索</a>
</div>
<div class="search-button">
<button type="submit" class="btn-search"></button>
</div>

<div class="search-common-panel">
<input type="text" x-webkit-speech="">
<i class="iconfont"></i>
</div>
</form>
</div>
</div>
</body>

<script type="text/javascript">
var getDOM = function(id) {
return document.getElementById(id);
}

var addEvent = function(id, event, fn) {
//这里用一个 ||document，为了防止getDOM为null的时候程序会报错
var el = getDOM(id) || document;
/*
el.addEventListener适用于非IE浏览器，el.attachEvent适用于IE浏览器
*/
if (el.addEventListener) {
el.addEventListener(event, fn, false);
} else if (el.attachEvent) {
el.attachEvent("on"+event,fn);
}
}

var flag = true;

addEvent("search_tab", "mouseover", function() {
if (this.className.indexOf("trigger-hover") < 0) {
this.className += " trigger-hover";
}
})

// addEvent("search_tab", "mouseout", function() {
// 	this.className = "search-list";
// })

addEvent("tab_1", "mouseover", function() {
if (this.className.indexOf("selected") < 0) {
this.className += " selected";
}
})

addEvent("tab_1", "mouseout", function() {
if (flag) {
this.className = " ";
}

flag = true;

})

addEvent("tab_1", "click", function() {
getDOM("search_tab").className = "search-list";
this.className = "selected";
flag = false;
})

addEvent("tab_2", "mouseover", function() {
if (this.className.indexOf("selected") < 0) {
this.className += " selected";
}
})

addEvent("tab_2", "mouseout", function() {
if (flag) {
this.className = " ";
}

flag = true;

})

/*每点击一次，都会出发onmouseout事件，
所以要设计一个标记来表示是否是出发了点击事件，
如果是，那么onmouseout将不会清除样式*/
addEvent("tab_2", "click", function() {
getDOM("search_tab").className = "search-list";
this.className = "selected";
console.log(this.className);
flag = false;
})

</script>
</html>

css代码如下：

* {
padding: 0;
margin: 0;
}

body {
background-color: #333;
}

.bg-div{
background-image: url('../images/river.jpg');
width: 1228px;
height: 690px;
margin: 0 auto;
position: relative;
}

.logo {
background-image: url('../images/logo.png');
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}

form {
float: left;
background-color: #fff;
padding: 5px;
}

.search-input-text {
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none;
width: 350px;
font-size: 16px;
}

.search-input-button {
border: 0;
background-image: url('../images/search-button.png');
width: 29px;
height: 29px;
float: left;
}

.search-box {
position: absolute;
top: 200px;
left: 300px;
}

#search-suggest {
width: 388px;
background-color: #fff;
border: 1px solid #999;
display: none;
}

.suggest ul {
list-style: none;
}

.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;/*手型*/
}

.suggest ul li:hover {
text-decoration: underline;
background-color: #e5e5e5;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航