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>

DIV的摇晃效果---jquery实现的更多相关文章

  1. div拖拽效果 JQuery

    <!DOCTYPE html> <html> <head> <meta name="description" content=" ...

  2. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

  3. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  4. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  5. JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  6. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

  7. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  8. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  9. 为div添加滚动效果:

    为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...

随机推荐

  1. thinkphp 模板里a标签 href 带参数的 使用U函数方法

    简单的说就是模板里 分类的链接地址 实现这个样子的 <a href="/index.php/Home/Category/assortment/cateid/2.html"&g ...

  2. Windows系统bug

    今天,发现Windows系统的一个bug 也不知道是不是bug,未深入 在网上下载图片,将图像另存为到本地的时候,图片文件名可以为空(后缀要保留) 但是,在本地,是无法直接将文件名命名为空的~

  3. 在linux下运行apt-get update 时，报错/var/lib/apt/lists/lock

    在运行apt-get update 时,报下面的错误: E: 无法获得锁 /var/lib/apt/lists/lock - open (11: Resource temporarily unavai ...

  4. php防注入

    引发 SQL 注入攻击的主要原因,是因为以下两点原因: 1. php 配置文件 php.ini 中的 magic_quotes_gpc选项没有打开,被置为 off 2. 开发者没有对数据类型进行检查和 ...

  5. Hadoop第3周练习--Hadoop2.X编译安装和实验

    作业题目 位系统下进行本地编译的安装方式 选2 (1) 能否给web监控界面加上安全机制,怎样实现?抓图过程 (2)模拟namenode崩溃,例如将name目录的内容全部删除,然后通过secondar ...

  6. linux命令行netstat总结

    1.所谓的监听就是某个服务程序会一直常驻在内存中,所以该程序启动的Port就会一直存在. 2.在小于1023的端口,都是需要以root身份才能够启动的. 3.大于1024以上的Port主要是作为cli ...

  7. uml面向对象建模基础总结

    uml九种图,其中的细节不说了.在后面的具体使用中提到这九种图. 建模流程: 1.分析需求. 2.通过分析名词,发现类,使用到类图. 3.建立用例模型,通过参与者分析用例,使用到用例图. 4.为用例建 ...

  8. PHP文件的上传与下载

    文件上传: 1.单个与多个文件上传 2.上传表单的属性设置 3.PHP配置文件中相关文件上传的设置 4.PHP处理上传的文件数据 php.ini配置: file_uploads = on; 默认on ...

  9. git之常用指令

    参考:Git教程 - 廖雪峰的官方网站 1.git  //linux上检测是否安装git 2.sudo apt-get install git //linux上安装git 3.git config - ...

  10. 原生态js，鼠标按下后，经过了那些单元格

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑 ...