淘宝搜索框效果

拼搏现实的明天。 2022-07-15 17:53 165阅读 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="";
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关价值十个亿的淘宝搜索功能

到这标题，是不是有小伙伴忍不住点进来看看? 标题党～～不不不，咱还是来点干货 ![在这里插入图片描述][2019083015304341.png] -----...

逃离我推掉我的手/ 2024年04月17日 19:40/ 0 赞/ 14 阅读

相关淘宝/天猫按分类搜索淘宝直播接口 API 返回值说明

淘宝直播是阿里巴巴推出的直播平台，定位于“消费类直播”，用户可边看边买，涵盖的范畴包括母婴、美妆等。随着越来越多的商家加入淘宝直播，就会发现许多主播面临着这样的问题：淘宝直

雨点打透心脏的1/2处/ 2024年03月23日 12:09/ 0 赞/ 31 阅读

相关淘宝搜索定向爬取

注意：依据每个关键词的不同，正则表达式可能需要需改。本例中正则表达式，仅对应于本例中关键词。 import requests,re def getH

Myth丶恋晨/ 2022年09月30日 06:48/ 0 赞/ 231 阅读

相关淘宝放大镜效果

效果图原理代码效果图 ![这里写图片描述][20160729191339022] 原理 ![这里写图片描述][20

青旅半醒/ 2022年09月24日 11:23/ 0 赞/ 188 阅读

相关 CSS仿淘宝首页导航条布局效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

缺乏、安全感/ 2022年07月25日 17:59/ 0 赞/ 141 阅读

相关淘宝搜索框效果

html代码： <DOCTTYPE!> <html> <head> <meta http-equiv="Content-Type" con

拼搏现实的明天。/ 2022年07月15日 17:53/ 0 赞/ 166 阅读

相关淘宝镜像

npm install -g less –registry=[https://registry.npm.taobao.org][https_registry.npm.taoba

阳光穿透心脏的1/2处/ 2022年06月14日 07:44/ 0 赞/ 289 阅读

相关仿淘宝的放大镜效果

概述主要介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单详细代码下载：[http:

浅浅的花香味﹌/ 2022年05月31日 11:17/ 0 赞/ 255 阅读

相关淘宝数据库负责人介绍淘宝数据库设计

原创 2014年05月24日 21:14:09 标签： [数据库][Link 1] / [数据库服务器][Link 2]

我就是我/ 2022年05月27日 10:43/ 0 赞/ 235 阅读

相关 js原生淘宝京东宝贝放大镜效果

js实现商城放大镜效果效果： > 鼠标放上去会有半透明遮罩、右边会有大图片局部图。 > 鼠标移动时右边的大图片也会局部移动。 `技术点`： `Even

不念不忘少年蓝@/ 2022年01月07日 20:17/ 0 赞/ 264 阅读