2016-07-23 53 views
4

我的想法是,當用戶單擊或將光標置於搜索欄中時,將位於頁面中心的搜索欄的位置更改爲右上角在中心部分製作區域顯示搜索結果。單擊時更改搜索欄的位置

此外,在轉換過程中光標應該保留在搜索欄中。

這是我的HTML和CSS的搜索欄

.search-container{ 
 
    position: absolute; 
 
    width: 630px; 
 
    height: 100px; 
 
    z-index: 15; 
 
    top: 50%; 
 
    left: 37%; 
 
    margin: -100px 0 0 -140px; 
 
} 
 
.search-wrapper{ 
 
    position: relative; 
 
    background-color: #b2dfdb; 
 
    width: auto; 
 
    height: 15em; 
 
    text-align: center; 
 
    border: 1px solid #fff; 
 
    box-shadow: 1px 1px rgba(0,0,0,0.35); 
 
} 
 
.searchbar-wrapper{ 
 
    vertical-align: middle; 
 
    width: auto; 
 
    margin: 20px; 
 
    margin-top: 70px; 
 
} 
 
.search-bar{ 
 
    float: left; 
 
    width: 400px; 
 
    line-height: 30px; 
 

 
}
<div class="search-container" id="mainpage-search"> 
 
     <div class="search-wrapper"> 
 
      <div class="searchbar-wrapper"> 
 
       <div class="row"> 
 
        <div class="search"> 
 
         <form class="form"> 
 
          <div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div> 
 
          <div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div> 
 
          <div class="clearfix"></div> 
 
         </form> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

我怎樣才能實現轉型?

+1

您提供的信息是不夠的。你能詳細解釋一下嗎? – Kan412

+0

,並且當該元素被取消選擇時,您希望它在頁面中間返回? –

回答

3

這是用jQuery(一個JavaScript庫)來實現它的方法,如果這是你的意思,將它移動到頂端。

$(document).ready(function(){ //when the document is fully loaded 
 

 
    $('.search-bar').click(function(){ //select your searchbar by class and onclick create a new function 
 
    var my_searchbar = $(this); //my_searchbar is how you can access your searchbar 
 
    var my_btn = $('.btn'); //get your btn 
 
    
 
    my_btn.css('display','none'); //set the css property of the submit button to "none" 
 
    
 
    //create animation -60px top and 200px left 
 
    //time is set to 1sec(1000ms) 
 
    //after the animation is finishied create new function 
 
    //in that functin make the submit button visible and animate it 500px to the left 
 
    my_searchbar.animate({ marginTop: '-60px', marginLeft: '200px'}, 1000, function() { 
 
    my_btn.css('display','block'); 
 
    $('.btn').animate({marginLeft: '500px'}, 1000); 
 
    }); 
 
    }); 
 
    
 
    
 
});
.search-container{ 
 
    position: absolute; 
 
    width: 630px; 
 
    height: 100px; 
 
    z-index: 15; 
 
    top: 50%; 
 
    left: 37%; 
 
    margin: -100px 0 0 -140px; 
 
} 
 
.search-wrapper{ 
 
    position: relative; 
 
    background-color: #b2dfdb; 
 
    width: auto; 
 
    height: 15em; 
 
    text-align: center; 
 
    border: 1px solid #fff; 
 
    box-shadow: 1px 1px rgba(0,0,0,0.35); 
 
} 
 
.searchbar-wrapper{ 
 
    vertical-align: middle; 
 
    width: auto; 
 
    margin: 20px; 
 
    margin-top: 70px; 
 
} 
 
.search-bar{ 
 
    float: left; 
 
    width: 400px; 
 
    line-height: 30px; 
 

 
}
<!-- add the jQuery library--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search-container" id="mainpage-search"> 
 
     <div class="search-wrapper"> 
 
      <div class="searchbar-wrapper"> 
 
       <div class="row"> 
 
        <div class="search"> 
 
         <form class="form"> 
 
          <div class="col-lg-8 col-md-8"><input class="search-bar" type="text" placeholder="Search for Songs"/></div> 
 
          <div class="col-lg-4 col-md-4"><span class="btn btn-blue btn-lg"><input type="submit" id="submit-query" value="Submit"></span></div> 
 
          <div class="clearfix"></div> 
 
         </form> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

+0

謝謝你,彼得。這是我想要的。如何添加過渡動畫?可以做到嗎? – Prakash

+0

是的,你可以用jQuery做任何事情。動畫是用.animate()完成的。 –

+1

我編輯了代碼。 .css()而不是.animate()。動畫以1000ms(1秒)完成 –