淘宝搜索框效果

最新推荐文章于 2022-04-11 21:05:16 发布

JSS00

最新推荐文章于 2022-04-11 21:05:16 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript 淘宝网 html 搜索

本文链接：https://blog.csdn.net/YLXB2/article/details/52893232

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html代码：

<DOCTTYPE!>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html"; charset='utf-8'/>
  <script src="javascript/index.js" type="text/javaScript"></script>
  <link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="all">
<div class="search_help">
    	<ul>
    		<li id="help_a">宝贝</li>
    		<li id="help_b">天猫</li>
    		<li id="help_c">店铺</li>
    	</ul>
    	</div>
	<form class="search_form">	
		<div class="search_content">
			<input type="text" id="search_content">
			<lable id="search_lable">毛呢大衣</lable>
		</div>
		<div class="search_bt">
			<button type="submit" class="search_btn" id="search_btn"></button>
		</div>
		<div class="search_top">
			<a href="#">高级<br>搜索</a>
		</div>
	</form>
</div>
</body>
</html>

<strong>css代码：</strong>

<pre name="code" class="css">body,ul{
	margin:0;
	padding:0;
}
.search_help{
     position: relative;
}
.search_help ul{
	list-style: none;
}
.search_help ul li{
	width: 45px;
	height: 20px;
	line-height: 20px;
	color: #f50;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	float: left;
}
.search_form{
	position: absolute;
	top: 20px;
}

.search_top{
	font-size: 14px;
    width: 45px;
    height: 45px;
    line-height: 20px;
    padding-left: 10px;
    float: left;
}
.search_top a{
	text-decoration: none;
	color: #666;
}
.search_bt{
	float: left;
}
.search_bt .search_btn{
	width: 100px;
	height: 45px;
	border: none;
	cursor: pointer;
}
.search_content{
    float: left;
}
.search_content input{
	width: 600px;
	height: 45px;
	overflow: hidden;
	outline: none;
	background: url("images/search_d.png") no-repeat;
	z-index: 1;
}
.search_content lable{
	position: absolute;
	left: 30px;
	top: 10px;
	color:#ccc;
	z-index: -1;
}

javascript代码：

window.onload = function(){
  hint();
  init_color()
  search_color();
}

//点击输入框，提示信息消失
function hint(){
    var search_content = document.getElementById("search_content");    
    //var value = search_content.value;
    //if(value!=""){
    search_content.οnfοcus=function(){
    	hidden();
    } 
   search_content.οnblur=function(){
   	    show();
   }
    }
   

function hidden(){
	var search_lable = document.getElementById("search_lable");
	search_lable.style.display ='none';
    search_content.style.background= "url(images/search_dd.png)";
}
function show(){
	var search_lable = document.getElementById("search_lable");
	search_lable.style.display ='block';
    search_content.style.background= "url(images/search_d.png) no-repeat";
}

//初始化输入框皮肤
function init_color(){
	var help_a = document.getElementById("help_a");
	var search_content = document.getElementById("search_content"); 
	var search_btn = document.getElementById("search_btn"); 
	search_content.style.border = "3px solid #f50";
	help_a.style.backgroundColor="#f50";
	help_a.style.color="#fff"
	search_btn.style.background = "url(images/search_a.png)";
}
//输入框皮肤变化
function search_color(){
	var help_a = document.getElementById("help_a");
	var help_b = document.getElementById("help_b");
	var help_c = document.getElementById("help_c");
	var search_content = document.getElementById("search_content"); 
	var search_btn = document.getElementById("search_btn"); 
	help_a.onclick = function(){
		init_color();
        delete_color(help_b);
        delete_color(help_c);
	}
	help_b.onclick = function(){
		search_content.style.border="3px solid #B80000";
		help_b.style.backgroundColor="#B80000";
	    help_b.style.color="#fff";
        search_btn.style.background="url(images/search_c.png)";
        delete_color(help_a);
        delete_color(help_c);
	}
	help_c.onclick = function(){
		search_content.style.border="3px solid  #f50";
		help_c.style.backgroundColor="#f50";
	    help_c.style.color="#fff";
        search_btn.style.background="url(images/search_a.png)";
        delete_color(help_a);
        delete_color(help_b);
	}
}

function delete_color(id){
	id.style.backgroundColor="";
	id.style.color="";
}