淘宝搜索框效果

拼搏现实的明天。 2022-07-15 17:53 229阅读 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 条评论，229人围观）

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

相关阅读

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

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

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

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

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

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

相关淘宝商品详情接口淘宝商品库存接口淘宝商品销量接口淘宝商品sku信息接口淘宝商品优惠价接口

淘宝商品详情API接口item\_get是一个非常重要的API接口，它可以获取淘宝商品的详细信息。对于淘\_宝卖家来说，通过调用该接口可以实现对自己商品信息的获取、修改和管理等

悠悠/ 2024年03月22日 15:11/ 0 赞/ 83 阅读

相关淘宝以图搜索商品接口图片搜索商品列表接口拍立淘接口

item\_search\_img-按图搜索淘宝商品（拍立淘） [taobao.item\_search\_img][taobao.item_search_img]

青旅半醒/ 2024年02月05日 15:03/ 0 赞/ 71 阅读

相关 jQuery仿淘宝放大镜效果

jQuery仿淘宝放大镜效果 html部分代码 <div class="box1"> <img src="./img/1.jpg"

「爱情、让人受尽委屈。」/ 2023年06月08日 06:12/ 0 赞/ 25 阅读

相关淘宝搜索定向爬取

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

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

相关淘宝放大镜效果

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

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

相关淘宝搜索框效果

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

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

相关仿淘宝的放大镜效果

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

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

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

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

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