淘宝搜索框

<!doctype html>
<html>
<head>

<meta charset="UTF-8">
<title>淘宝</title>
<style type="text/css">
    body{font-size:12px;padding:0;margin:0;}
    #main{
          width:640px;
          margin:30px auto;
          position:relative;}

    .senior{display:block;position:absolute;right:0;
       color:#c5c5c5;padding:2px 20px 0 8px;
       height:35px;width:30px;}

    .btn{display:block;position:absolute;right:60px;top:0; 
                 /*如果父元素有相对定位或者绝对定位，则其绝对定位是相对于父元素而言*/
           background-color:#f14515;
           width:75px;height:35px;
           font-size:14px;border:0;
           color:#fff;}

    .input{display:block;position:absolute;right:135px;top:0px; 
            width:500px;height:29px;
            border:2px solid #f14515;
            text-indent: 65px;
            outline:none;
        }

    cite{font-family:"Microsoft Yahei";
        position:absolute; left:3px;top:2px;
         display:block; width:60px;
         background:#ccc;
         text-indent:13px;color:#fff;
         height:29px;line-height:29px;
         border:1px solid #c1c2c3;
                 }

    ul{position:absolute;  left:3px;top:2px;
      display:none; list-style:none;padding:0;border:0;margin:0;
       }

     ul li{  width:60px;
             border:1px solid #c1c2c3;
             background:#ccc;
             text-align:center;color:#fff;
             height:29px;line-height:29px;
                    }
    /*三角*/
     cite a {
      content: '';
      position: absolute;
      right: 2px;
      bottom: 4px;
      width: 0;
      height: 0;
      border-width: 6px;
      border-style: solid;
      border-color: #888 transparent transparent transparent;
       transition: all 0.2s;
      -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      -ms-transition: all 0.2s;
     transform-origin: 50% 25%;
     -ms-transform-origin: 50% 25%;
     -moz-transform-origin: 50% 25%;
     -webkit-transform-origin: 50% 25%;
     -o-transform-origin: 50% 25%;
        }

    
    
</style>
</head>

<body>
 <div id="main">
  
   <a class="senior">高级<br/>搜索</a>
   <button type="submit" aria-label="搜索" class="btn">搜索</button>
   <input type="text" class="input">
   <!-- cite斜体 -->
   <p><cite><a></a>店铺</cite></p>
   <!-- <p>&nbsp;</p> -->

   <ul id="lii" class="select">
       <li>宝贝</li>
       <li>天猫</li>
       <li>店铺</li>
   </ul>

 </div>

    <script typt="text/javascript">
         window.onload=function(){

         var main=document.getElementById("main");
         /*ul返回的是一个数组，如果只有一个后面必须有[0]代表本身*/
         var ul=main.getElementsByTagName('ul')[0];
         var li=main.getElementsByTagName("li");
         var title=main.getElementsByTagName('cite')[0];
         var index=-1;
          
          //当点击宝贝时，显示下拉选项
          title.onclick=function(event){
              ul.style.display="block";
               //防止冒泡；
               //若无此步骤，则会冒泡到"点击空白页面"的函数，导致次操作无效。
               event=event||window.event;
              if(event.stopPropagation){
                event.stopPropagation();
             }
             else{
                event.cancelBubble=true;
             }

          /* onkeyup会在键盘按键被松开时发生*/

          document.onkeyup=function(e){
              e=e||document.event;
                for(var i=0;i<li.length;i++){
                    li[i].style.background="#ccc";
                }        
                
                if(e.keyCode==38){
                    index--;
                    if(index<0){
                        index=li.length;
                    }
                }      
          }



          document.onkeyup=function(e){
                e=e||document.event;
                for(var i=0;i<li.length;i++){
                    li[i].style.background="#ccc";
                }
                //若是按了向下的方向键
                if(e.keyCode==40){
                    index++;
                    if(index>=li.length){
                        index=0;
                    }
                    li[index].style.background="#f14515";
                }
                //若是按了向上的方向键
                if(e.keyCode==38){
                    if(index<=0){
                        index=li.length;
                    }
                    index--;
                    li[index].style.background="#f14515";
                }
                //若是按了回车键
                if(e.keyCode==13&&index!=-1){
                    title.innerHTML=li[index].innerHTML;
                    for(var i=0;i<li.length;i++){
                        li[i].style.background="#ccc";
                    }
                    index=-1;
                    ul.style.display="none";
                }
            }
          }  
          
          
           // 点击页面空白处时 
          document.onclick=function(){
              // 下拉选项收起
             ul.style.display="none";
         }
         
         // 鼠标滑过、离开、点击每个选项时
         for(var i=0;i<li.length;i++){
              li[i].onmouseover=function(){
                    this.style.background="#f14515";
                }
              li[i].onmouseout=function(){
                    this.style.background="#ccc";
                }
                //当鼠标点击某一选项时，将其显示在已选title中
              li[i].onclick=function(){
                    title.innerHTML=this.innerHTML;
                }
           }

         }

 </script> 
</body>
</html>
posted @ 2020-02-16 18:06 apple78 阅读(224) 评论(0) 收藏举报
刷新页面返回顶部
淘宝搜索框

公告
