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. 使用maven编译Java项目 http://www.tuicool.com/articles/YfIfIrq

    使用maven编译Java项目 时间 2014-07-17 17:42:37  Way Lau's Blog 原文  http://www.waylau.com/build-java-project- ...

  2. 再谈Jquery Ajax方法传递到action 【转载】

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://cnn237111.blog.51cto.com/2359144/984466 之 ...

  3. Hibernate 查询MatchMode的四种模式

    Hibernate 查询MatchMode的四种模式 MatchMode.START:字符串在最前面的位置.相当于"like 'key%'" MatchMode.END:字符串在最 ...

  4. 新浪微博客户端(47)-在TextView中插入表情

    DJEmotionPageView.m // 发送点击广播(和android类似,区别在于android的广播是只要有上下文对象context,就可以发送) // iOS中的通知发送和接收都是通过NS ...

  5. svn三大目录trunk、branch和tag

    SVN中Branch和tag的比较在SVN中Branch和tag在一个功能选项中,在使用中也往往产生混淆.在实现上,branch和tag,对于svn都是使用copy实现的,所以他们在默认的权限上和一般 ...

  6. linux下生成core dump文件方法及设置

    linux下生成core dump文件方法及设置    from:http://www.cppblog.com/kongque/archive/2011/03/07/141262.html core ...

  7. 30秒搭建Github Page

    如果中国每个程序员都写博客,那么中国IT届的春天就来了 原文转自我的前端博客,链接:http://www.hacke2.cn/create-github-page/ 有同学问我的网站是怎么创建的,其实 ...

  8. java httpclient发送json 请求 ,go服务端接收

    /***java客户端发送http请求*/package com.xx.httptest; /** * Created by yq on 16/6/27. */ import java.io.IOEx ...

  9. resin

    http://blog.csdn.net/sea0x/article/details/6097531 resin 启动: resin 配置文件摘取: <server-default> &l ...

  10. Mac OS 中的 Python（和 NumPy）开发环境设置

    http://www.python()tab.com/html/2013/pythonjichu_1010/582.html ()需要删除