<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery边框移动效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
margin: 0;padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font: 14px/16px '微软雅黑,Microsoft yahei';
}
.login {
width: 350px;
height: 350px;
position: absolute;
top: 150px;
right: 150px;
position: absolute;
}
.login form,.logform p{
width: 100%;
}
.logform p {
margin-bottom: 15px;
}
.login form fieldset{
padding: 35px 5%;
}
.logform label,.logform input {
display: inline-block;
}
.logform p>input[type="submit"] {
display: block;
margin: 5px auto;
}
.logform label {
text-align: right;
width: 28%;
}
.logform input {
width: 67%;
}
fieldset legend {
text-align: center;
}
#divboder {
display: absolute;
border: 1px solid red;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
transition: all 0.4s;
display: none;
}
</style>
</head>
<body>
<div class="login">
<form class="logform">
<fieldset>
<legend>登录</legend>
<p><label>用户名：</label><input type="text"></p>
<p><label>密码：</label><input type="password"></p>
<p><label>短信验证码：</label><input type="text"></p>
<p><label>验证码：</label><input type="text"></p>
<p><input type="submit" value="登录"></p>
</fieldset>
</form>
<div id="divboder"></div>
<div>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(function(){
$(":input:not(:last)").focus(function(){
var $target=$(this);
var tar_top=$target.offset().top,
tar_left=$target.offset().left,
tar_height=$target.height(),
tar_width=$target.width();
$("#divboder").width(tar_width).height(tar_height);
$("#divboder").show().offset({"top": tar_top,"left": tar_left});
console.log('tar_top:'+tar_top+"\n"+"tar_left:"+tar_left);
});
});
</script>
<!--
设置了inline-block;
margin: 0 auto;就不能居中了
在ie8中，设置fieldset的padding，结果变成了margin的效果(ie8及以下有这个bug)
1、点击之后获取当前点击元素的上，左偏移距离
2、设置给隐藏的div
3、通过css transition得到过渡效果
-->
</body>
</html>
