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

最新推荐文章于 2023-04-13 22:04:22 发布

tyilack_小小黑

最新推荐文章于 2023-04-13 22:04:22 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/u014520745/article/details/50807434

版权

javascript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

最终效果图如下：

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