首页 > 其他 > 详细

登录窗口抖动效果

时间:2016-07-11 20:57:48      阅读:219      评论:0      收藏:0      [点我收藏+]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;}
body{
background: url("bg.jpg");
background-size: cover;
}
input{
outline: none;
width: 300px;
height: 24px;
border: 1px solid #0bbdff;
text-indent: .5em;
-webkit-box-shadow: 0 0 0px 40px #fff inset;
-o-box-shadow: 0 0 0px 40px #fff inset;
-ms-box-shadow: 0 0 0px 40px #fff inset;
-moz-box-shadow: 0 0 0px 40px #fff inset;
box-shadow: 0 0 0px 40px #fff inset;
}
html,body{
margin:0;
padding:0;
text-align:center;
font-size:12px;}
.login-box{
border: 1px solid #fff;
width:400px;
background: #fff;
opacity: .7;
padding: 80px 10px;
line-height: 20px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
}
#btn{
cursor: pointer;

}
</style>
</head>

<body>
<div class="login-box" >
<form action="#" method="post">
<dl class="login-pannel">
<dd>
昵称:<input type="text" name="name" id="name" /><br><br>
</dd>
<dd>
密码:<input type="password" name="pwd" id="pwd"/><br><br>
</dd>
<dd >
<input type="button" id="btn" value="登录" style="width: 340px"/>
</dd>
</dl>

</form>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>

$(function(){
var user=document.getElementById(‘name‘);
var pwd=document.getElementById(‘pwd‘);

$("#btn").click(function(){
flash(‘.login-box‘,5,10,100);
});
});
/*
*
* 控件震动动画
* obj控件
* time震动时间长——短循环长度
* wh震动幅度px
* fx动画速度s
*/
function flash(obj,time,wh,fx)
{
$(function(){
var $panel = $(obj);
var offset = $panel.offset()-$panel.width();
var x= offset.left;
var y= offset.top;
for(var i=1; i <= time; i++){
if(i%2==0)
{
$panel.animate({left:‘+‘+wh+‘px‘},fx);
}else
{
$panel.animate({left:‘-‘+wh+‘px‘},fx);
}

}
$panel.animate({left:0},fx);
$panel.offset({ top: y, left: x });

})
}
</script>

登录窗口抖动效果

原文:http://www.cnblogs.com/ZH1132672711/p/5661306.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!