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

待我称王封你为后i 2022-08-20 15:25 139阅读 0赞

最终效果图如下：

![Center][]

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

[Center]: /images/20220731/22d63a98906641e89c99ddf2e3a55415.png