单击搜索栏时更改搜索栏的位置
Changing the position of a search bar when it is clicked
我的想法是,当用户点击或将光标放在搜索栏中时,将位于页面中心的搜索栏的位置更改为右上角,从而使区域位于中心部分以显示搜索结果。
此外,在转换过程中,光标应保持在搜索栏中。
这是我的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>
我如何实现过渡?
这是使用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>
相关文章:
- JQuery中的活动搜索栏
- 如何让typeahead在我的搜索栏中填充自定义参数
- 是否有其他人在设计Twitter Typeahead时遇到问题'的搜索栏
- Javascript中的搜索栏-部分匹配字符串
- 将图像添加到 json 搜索栏
- 显示移动窗口时引导导航栏中的 atach 搜索栏
- 需要移动下拉框搜索的位置
- JS中使用滑块的音频搜索栏
- 我怎样才能得到这个“;搜索栏”;使用jquery
- 我的搜索栏与YouTube API不同步
- 使用 json ajax javascript jquery 和 java 的自动完成搜索栏(无 PHP)
- 谷歌地图地点自动完成搜索任何位置
- 角度:需要搜索栏在 2 个不同的 ng 重复上工作
- 如何使用 jQuery 或 CSS3 使搜索栏响应式
- TinyMCE 工具栏位置
- JavaScript Auto Complete 搜索栏修改帮助
- 无法让 javascript/html 搜索栏工作
- 为什么谷歌浏览器清空我在MediaWiki中的搜索栏
- 创建搜索栏
- 单击搜索栏时更改搜索栏的位置