css 实现input 获得焦点时label 向上移动并且输⼊框下边框样式改变
Write By Monkeyfly
以下内容均为原创，如需转载请注明出处。
前提：
今晚在浏览⽹页时，⽆意中发现⽹站中⼀位⽹友的评论中有⼀张动态图⽚（如上图所⽰），效果看起来挺炫酷的，所以呢，也想⾃⼰动⼿做⼀做，因为之前也看到过好多类似的动态效果，⼀直都没有机会做。今天就趁着业余时间尝试着做⼀些，顺便能锻炼⾃⼰的能⼒。
如下图所⽰：
准备⼯作：
做之前的第⼀件事，就是根据这张图来分析上图中的动态效果到底是如何实现的。单纯光说做的话，⼤家基本都会做。最重要的还是⽤CSS 实现的想法和过程，不清楚实现的⽅式，不会灵活运⽤所学的知识，那也是⽩搭。
就说这么多吧，接下来让我们正式开始分析：
1.都是表单元素，⼤家都知道，就不多赘述了；
2.先看⽂字，⼀眼就能认出，肯定是⽤label标签来做的，并且运⽤了动态的顶部偏移效果。
问题⼀：那为什么不是placeholder属性呢？
⾸先从语义上就pass掉了，placeholder属性是输⼊框的提⽰⽂字，仅仅在⽤户输⼊前做提⽰⽤；⽽且当⽤户获取到输⼊框的焦点之后，placeholder就应该消失了，⽽不是⼀直存在。
问题⼆：那么，label标签是如何实现的呢？
很明显，使⽤absolute定位到input输⼊框的左下⽅，然后运⽤动画效果移动到input的顶部。这个不⽤多说，⼤家应该都知道吧。问题三：应该⽤哪个动画效果呢？
我⾸先想到的是jQuery中⽤于创建⾃定义动画的函数animate(); 当然你也可以⽤其他的⽅法。
⾸先，来复习⼀下animate()⽅法吧。说实话，我也忘了怎么⽤了。
语法：参数说明
(selector).animate({styles},speed,easing,callback)
styles - 设置要产⽣动画效果的⼀个或多个css属性/值。【必选项】
speed - 设置动画的速度。【可选项】
可选的值：
1.表⽰动画时长的毫秒数值（如：1000）；
2.三种系统预定速度的字符串("slow","normal", or"fast")之⼀。
easing - 规定在动画过程中元素的速度。默认为"swing"。【可选项】
可能的值：
1.swing：两边慢，中间快。
2.linear：匀速移动。
callback - 规定动画完成之后要执⾏的函数。【可选项】
简单看个栗⼦就知道怎么⽤了。
HTML代码：
<button id="go"> Run</button>
<div id="block">Hello!</div>
jQuery代码：
// 在⼀个动画中同时应⽤三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "20px",
borderWidth: 10
}, 1000 );
});
3.然后设置input的外边框为outline:none;（输⼊框获得焦点时，外边框有⼀圈蓝⾊的光效，不美观所以要去掉） 并且设置input为⽆边框border:none;
当然要留下底部边框，即border-bottom:1px solid #c3c3c3;
4.接下来，就是最最重要的部分。
给input的底部边框border-bottom添加动画效果，同时再改变颜⾊就可以了。
//输⼊框获得焦点时
$(this).css({"border-bottom": "1px solid red"});
//输⼊框失去焦点时
$(this).css({"border-bottom": "1px solid #c3c3c3"});
这样做肯定是不⾏的，因为没有涉及到动画效果。
后来发现不对，GIF中的input底部边框⼀直都在，此时意识到⾃⼰的想法有问题。
input的border-bottom的长度不能动态的改变，这种⽅法根本不能实现。觉得应该换⼀种实现⽅式。
5.新的想法诞⽣：
要不就⽤⼀个div作为底边框来实现，将div设置absolute定位到与input底边框重合（覆盖上去）；
并且默认设置div的width为0，让它先隐藏起来；
当输⼊框获取焦点的时候，只需要动态地改变div的width和输⼊框的width⼀样就⾏了；
⽽且div的颜⾊在开始时就直接默认为红⾊。
这样应该就可以实现了，试试就知道了。
代码如下：
//输⼊框获得焦点时
$("input").focus(function(event) {
//label上升
$(this).siblings("label").stop().animate({"bottom": "50px"}, 500);
//底边框展开
$(this).next(".bottom-line").stop().animate({"width": "400px"}, 500);
});
//输⼊框失去焦点时
$("input").blur(function(event) {
/
/label下降
$(this).siblings("label").stop().animate({bottom: "10px"}, 500);
//底边框收回
$(this).next(".bottom-line").stop().animate({"width": "0"}, 500);
});
注意：
当与animate()⽅法⼀起使⽤时，属性名称必须是驼峰写法。即必须使⽤paddingLeft代替padding-left，marginRight代替margin-right，依次类推。
可以应⽤动画的属性，请参考：
颜⾊动画不包含在核⼼jQuery库中。如果想要应⽤动画颜⾊，需要从jQuery下载颜⾊动画插件。
6.接下来给⼤家说⼀说为什么要在animate()⽅法之前添加stop()⽅法。
stop()⽅法的作⽤是：停⽌当前正在运⾏的动画。（动画效果运⾏到⼀半也会⽴即停⽌）
添加与不添加的区别：
添加stop()⽅法：当前的动画效果进⾏⼀半就⽴即停⽌了，取消当前正在进⾏的动画。
不添加stop()⽅法：当前的动画效果进⾏完毕后，才会去执⾏stop()⽅法并停⽌当前动画。
其实添不添加stop()⽅法的效果是很明显的，⾃⼰试试就知道了。说了你可能不会直观的感受到。
完整代码如下所⽰：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现input边框动态效果</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background-color:#333;
}
.content{
width:1000px;
height: 500px;
margin:0 auto;
margin-top: 200px;
background-color:#fff;
}
.details {
padding:50px 50px 0;
}
.details.item{
width:400px;
margin:20px auto;
position: relative;
}
.item label{
font-size: 16px;
position: absolute;
left:2px;
bottom:10px;
font-family: "宋体";
color:#777;
cursor: text;
}
.item input{
padding-top: 35px;borderbox
width:400px;
height: 80px;
font-size: 20px;
border:none;
outline: none;
border-bottom: 1px solid #c3c3c3;
}
.item.bottom-line{
position: absolute;
width: 0;
height: 2px;
left:0;
bottom: -1px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div class="content">
<div class="details">
<div class="item">
<label for="item-firsthev">⾸重</label>
<input id="item-firsthev"type="text">
<div class="bottom-line"></div>
</div>
<div class="item">
<label for="next-hev">续重</label>
<input id="next-hev"type="text">
<div class="bottom-line"></div>
</div id="">
<div class="item">
<label for="charge">运费</label>
<input id="charge"type="text">
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
输⼊框获得焦点时
$("input").focus(function(event) {
/
/label动态上升，升⾄顶部
$(this).siblings("label").stop().animate({"bottom": "50px"}, 500);
//div模拟的下边框伸出，其width动态改变⾄input的width
$(this).next(".bottom-line").stop().animate({"width": "400px"}, 500); });
输⼊框失去焦点时
$("input").blur(function(event) {
//label动态下降，恢复原位
实现效果图：
⾄此，所有内容已全部展⽰完毕。结束语再后来发现，其实还可以⽤CSS3新增的过渡属性transition来实现。通过此复合属性，可以设置对象变换时的过渡。只可惜⾃⼰不会⽤，对这个属性也不熟悉，等⽇后学会了再完善。希望知道其他⽅法的同学也可以分享⼀下⾃⼰的⽅法。毕竟，我只是个新⼿。 $(this ).siblings("，label").stop().animate({bottom: "10px"}, 500);
//⽤div 模拟的下边框缩回，其width 动态恢复为默认宽度0
$(this ).next(".bottom-line").stop().animate({"width": "0"}, 500);
});
</script >
</body >
</html >
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论