<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单框抖动摇晃Jquery特效</title>
</head>
<style>
html,body{
margin,padding:0;
textalign:center
}
#login-right{
border: 1px solid #FFBE7A;
zoom: 1;
width:400px;
background: #FFFCED;
padding: 8px 10px;
line-height: 20px;
margin-left:auto;
margin-right:auto
}
</style>
<div id="login-right" >
<form action="#" method="post" onSubmit="return check()">
<dl class="login-pannel">
<dd>
昵称：<input name="uname" type="text" id="uname" value="Eric Qin" />
<br /><br />
</dd>
<dd>
密码：<input name="pwd" type="password" id="pwd" value="Hello World!"/>
<br /><br />
</dd>
<dd >
<input type="button" id="demo" value="让DIV摆动" />
<input type="button" id="demo1" value="让控件摆动" />
<input type="button" id="demo2" value="让自己摆动" />
</dd>
<dd >
<input type="button" id="demo3" value="让控件摆动幅度大点" />
<input type="button" id="demo4" value="让控件摆动时间久点" />
<input type="button" id="demo5" value="让控件摆动速度飞快" />
</dd>
</dl>
</form>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
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>
<script>
$(function(){
var user=document.getElementById(‘uname‘);
var pwd=document.getElementById(‘pwd‘);
$("#demo").click(function(){
flash(‘#login-right‘,8,10,100);
});
$("#demo1").click(function(){
flash(‘#uname‘,8,10,100);
});
$("#demo2").click(function(){
flash(this,8,10,100);
});
$("#demo3").click(function(){
flash("#login-right",8,30,100);
});
$("#demo4").click(function(){
flash("#login-right",20,10,100);
});
$("#demo5").click(function(){
flash("#login-right",15,15,50);
});
})
</script>
</html>
时间： 2024-10-26 03:39:15