zoukankan      html  css  js  c++  java
  • 制作一个能收缩展开的搜索框

    html

    1 <!-- 搜索 -->
    2     <div class="input-card-soso" id="yincang">
    3         <div class="input-item">
    4             <label class="sousuo" >搜索<input id='tipinput' type="text"  value="" ><img class="dakai" src="img/souqi.png" alt=""  onclick=" upSousuo()"></label>
    5             
    6         </div>
    7     </div>

    js

     1 // 隐藏搜索框
     2     function upSousuo() {
     3            
     4             if ($('.dakai').attr("src") == "img/souqi.png") {
     5 
     6 
     7                 $('.dakai').attr("src", "img/zankai.png")
     8 
     9                 document.getElementById("yincang").style.animationName = "example2";
    10                 document.getElementById("tipinput").style.animationName = "example3";
    11                 document.getElementById("yincang").style.animationDuration = "1s";
    12                 document.getElementById("tipinput").style.animationDuration = "2s";
    13 
    14                 document.getElementById("yincang").style.minWidth = "3rem";
    15                 document.getElementById("yincang").style.width = "3rem";
    16                 document.getElementById("tipinput").style.display = "none";//隐藏
    17  
    18                
    19             } else {
    20                 $('.dakai').attr("src", "img/souqi.png")
    21                 
    22                 document.getElementById("yincang").style.animationName = "example";
    23                 document.getElementById("tipinput").style.animationName = "example1";
    24                 document.getElementById("yincang").style.animationDuration = "1s";
    25                 document.getElementById("tipinput").style.animationDuration = "2s";
    26 
    27                 
    28                 document.getElementById("yincang").style.width = "16rem";
    29                 document.getElementById("tipinput").style.display = "";//显示
    30                 
    31                 
    32             }
    33         } 

    css

     1 .sousuo{
     2   color: #23539c;
     3 }
     4 .dakai{
     5     width: 20px;
     6     height: 20px;
     7     /* float: right; */
     8     position: fixed;
     9 }
    10 #yincang{
    11   animation-name: example;
    12   animation-duration: 1s;
    13  
    14 }
    15 #tipinput{
    16   animation-name: example1;
    17   animation-duration: 1s;
    18 }
    19 
    20 @keyframes example {
    21   0%   {width: 0rem; }
    22   /* 25%  { 4rem; }
    23   50%  { 8rem; }
    24   75%  { 12rem; } */
    25   100% {width: 16rem; }
    26 }
    27 @keyframes example1 {
    28   0%   {display: none; }
    29   15%  {width: 0rem; }
    30   /* 25%  { 3rem; }
    31   50%  { 6rem; } */
    32   75%  {width: 12rem; }
    33   100% {display: ''; }
    34 }
    35 @keyframes example2 {
    36   0% {width: 16rem; }
    37   /* 25%  { 12rem; }
    38   50%  { 8rem; }
    39   75%  { 4rem; } */
    40   100%   {width: 0rem; }
    41  
    42  
    43 }
    44 @keyframes example3 {
    45   0%   {display: ''; }
    46   15%  {width: 12rem; }
    47   /* 25%  { 6rem; }
    48   50%  { 3rem; } */
    49   75%  {width: 3rem; }
    50   100% {display: none; }
    51 }
    52 #tipinput{
    53   font-size: 15px;
    54   color: #888;
    55   border-left: 1px solid #fff;
    56   border-right: 1px solid #fff;
    57   border-top: 1px solid #fff;
    58   border-bottom: 1px solid #3385ff;
    59   padding: 2px;
    60   border-radius: 2px;
    61    
    62 }

    展开收缩添加了动画效果,略有瑕疵

    世界上没有什么偶然,有的只有必然。——壹原侑子
  • 相关阅读:
    Java转Exe
    匹配数字和字母的正则表达式
    POI
    Maven– HelloWorld实例
    eclipse+maven+tomcat构建web工程
    Maven
    SSH
    Struct2小结:
    Eclipse中没有javax.servlet和javax.servlet.http包的处理办法
    openSession()与getCurrentSession()的区别
  • 原文地址:https://www.cnblogs.com/liazhimao/p/14480522.html
Copyright © 2011-2022 走看看