JQ之简单的搜索动画

妖狐艹你老母 2022-05-08 02:16 173阅读 0赞

### **效果图：** ###

![70][]

> 涉及bootstrap以及jquery

### 1: HTML ###

###  2：CSS ###

.search{
    	position: relative;
    	float: left;
    	height: 56px;
    	line-height: 56px;
    	padding: 0 20px;
    }	
    .search input{
    	border-radius: 40px;
    	border: 0;
    	outline: none;
    	background: #eee;
    	width: 100px;
        height: 38px;
        padding: 0 40px 0 20px;
    }
    
    .search .search-btn {
        position: absolute;
        top: 13px;
        right: 25px;
        border-radius: 100px;
        width: 30px;
        height: 30px;
    }
    .search i {
        position: absolute;
        top: 6px;
        right: 7px;
        font-size: 18px;
    }

### 3:JQ ###

//搜索框动画
    var Input = $('form input');
    	Input.focusin(function (){
    	$('.search-btn').css({
    		"background":"#333",
    		"color":"#fff"
    	});
    	Input.animate({width:200});
    });
    
    Input.focusout(function (){
    	$('.search-btn').css({
    		"background":"",
    		"color":"#333"
    	});
    	Input.animate({width:100});
    })

### 4：整体 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
    		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    		<style type="text/css">
    			.search{
    				position: relative;
    				float: left;
    				height: 56px;
    				line-height: 56px;
    				padding: 0 20px;
    			}	
    			.search input{
    				border-radius: 40px;
    				border: 0;
    				outline: none;
    				background: #eee;
    				width: 100px;
    			    height: 38px;
    			    padding: 0 40px 0 20px;
    			}
    			
    			.search .search-btn {
    			    position: absolute;
    			    top: 13px;
    			    right: 25px;
    			    border-radius: 100px;
    			    width: 30px;
    			    height: 30px;
    			}
    			.search i {
    			    position: absolute;
    			    top: 6px;
    			    right: 7px;
    			    font-size: 18px;
    			}
    		 </style>
    	</head>
    	<body>
    	 	<div class="search">
    	 		<form action="" method="get" accept-charset="utf-8">
    		        <input type="text" placeholder="搜索">
    		        
    		     	<a class="search-btn" href=""><i class="glyphicon  glyphicon-search"></i></a>
    	    		</form>
    	 	</div>       
    	</body>
    	
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    	<script type="text/javascript">
    		//搜索框动画
    		var Input = $('form input');
    			Input.focusin(function (){
    			$('.search-btn').css({
    				"background":"#333",
    				"color":"#fff"
    			});
    			Input.animate({width:200});
    		});
    	
    		Input.focusout(function (){
    			$('.search-btn').css({
    				"background":"",
    				"color":"#333"
    			});
    			Input.animate({width:100});
    		})
    	</script>
    </html>

### 补充：回车提交表单 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>回车提交表单</title>
    		<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
    	</head>
    	<body>
    		<input type="input"  placeholder="回车提交"/>
    
    		<script type="text/javascript">
    			 //keyup()触发、或将函数绑定到指定元素的 key up 事件
    		     $("input").keyup(function(e){//当按下按键时，运行函数
    				    if(e.which=="13"){//e.which对应的输入字符, 13对应Enter键
                                               // $('#myForm').submit();
    					   alert("回车提交!")
                            
    				    }
    			});
    		</script>
    	</body>
    </html>

[70]: /images/20220508/03c099dc70fa491a80704892ed88f322.png