做了一个input输入框效果，默认效果是：
点击focus后效果是：
o(∩_∩)o 哈哈，是不是觉得很不错吧，我们看下代码吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body>
<style>
*{margin:0;padding:0;}
body{font-size:14px;font-family:"微软雅黑";color:#333;}
.wrap{
width:640px;
height:320px;
margin:50px auto;
border:1px solid #eee;
}
.wrap .wrap_Iten{
position:relative;
margin:20px auto;
}
.item_tip {
background-color: #fff;
color: #999;
font-size: 12px;
left: 12px;
padding: 0 3px;
position: absolute;
top: 10px;
transition: all .2s linear 0s;
}
.form_input {
border: 1px solid #dcdcdc;
border-radius: 5px;
font-size: 12px;
padding: 9px 10px;
transition: border-color .15s ease-in-out 0s;
width: 278px;
outline:none;
}
.item_tip_focus{
color:#5188a6;
font-size:12px;
top:-8px;
}
.form_input-focus{
border-color:#5188a6;
outline:0 auto;
}
</style>
<div>
<form action="">
<div>
<div>
<div>用户名/邮箱</div>
<input type="text" tabindex="1" value="" name="username" autocomplete="off" onblur="blurInputLoginBox($(this))" onfocus="focusInputLoginBox($(this))">
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
function focusInputLoginBox(obj) {
obj.addClass("form_input-focus");
obj.prev(".item_tip").addClass("item_tip_focus")
}
function blurInputLoginBox(obj) {
var v = obj.val();
if (v == "") {
obj.removeClass("form_input-focus");
obj.prev(".item_tip").removeClass("item_tip_focus")
} else {
obj.addClass("form_input-focus");
obj.prev(".item_tip").addClass("item_tip_focus")
}
}
</script>
</body>
</html> 
网友评论文明上网理性发言 已有0人参与
发表评论: