DIV的摇晃效果---jquery实现

<!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>

转载于:https://www.cnblogs.com/eric-qin/p/4521487.html

DIV的摇晃效果---jquery实现相关推荐

html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
为div添加滚动效果:
为div添加滚动效果: .xxxx{ width: 100%;height: 100%;overflow: hidden;overflow-y: auto;} 代码片段 <div class=& ...
使用div制作表格效果
使用div制作表格效果 1 基础版展示 1.1代码 1.2HTML 1.3CSS 2进阶版展示(动态生成表格) 2.1代码 2.2HTML 2.3CSS 2.4JS 2.5完整版 1 基础版展示点击 ...
css 让div悬浮,css实现div悬浮不动效果
这在很多网站都常见,比如说美丽说,还有本博,css实现div悬浮不动效果很简单,效果图就如本站所示,实现css代码如下: CSS固定定位 { padding:0; margin:0; } div{ w ...
php div 居中代码,Div内容居中效果如何实现
本篇文章主要给大家介绍div内容居中也就是div内容上下左右都居中的效果方法. 对于div内容居中的效果,相信大家都非常熟悉了,比如我们常见的网站导航栏部分.那么在之前的文章中就给大家介绍过div水平 ...
html div块背景斜线,DIV+CSS 斜线效果
DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果.代码分享给大家,你可以自己变通. http://www.admin10000.com 提示要注意两点:1.DIV ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
div alert html,基于jQuery的弹出消息插件 DivAlert之旅（一）
想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...
php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...

DIV的摇晃效果---jquery实现

DIV的摇晃效果---jquery实现相关推荐

最新文章

热门文章