jquery登录界面边框移动效果

来源：互联网发布：淘宝新手开店实战书籍编辑：程序博客网时间：2024/05/21 17:27
<!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、设置给隐藏的div3、通过css transition得到过渡效果--></body></html>
1 0