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. Mysql 排名查询

    原文地址: http://www.cnblogs.com/songshuai/p/5688550.html http://blog.csdn.net/u010503822/article/detail ...

  2. axure新手入门教程

    首先做个声明:此次教程里为了快速完成,借用了一些网上已有教程的图文,不是剽窃,只图方便.另外,因为汉化版本可能功能名称等略有差别,请自行理解. 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽 ...

  3. 新浪微博客户端(35)-使用NSMutableAttributedString实现多行文本的效果

    DJComposeViewController.m import "DJComposeViewController.h" #import "DJAccountTool.h ...

  4. VS2010webConfig配置

    1.连接SqlServer数据库 <connectionStrings> <add name="ConnectionStringName" connectionS ...

  5. 【8-17】HTML测试

    Source : http://www.w3school.com.cn/html HTML 测验 结果:9/20 您的回答: 1.HTML 指的是? 您的回答:超文本标记语言(Hyper Text M ...

  6. hadoop常见问题汇集

    1 hadoop conf.addResource http://stackoverflow.com/questions/16017538/how-does-configuration-addreso ...

  7. R语言演示功能

    大家熟知的画图ggplot2包 library(ggplot2) #查看系统自带的qplot的函数演示 example(qplot) #R语言的基本对象 向量.矩阵.数组.数据框.列表 R语言的变量都 ...

  8. RTX二次开发（一）（基于ASP.NET）

    腾讯通RTX是(Real Time eXpert)是腾讯公司推出的企业级实时通信平台,致力于帮助企业提高运作效率.降低沟通成本.拓展商业机会,是一种高度可管理.低成本.易部署的IT平台.RTX集成了丰 ...

  9. GridView控件隐藏列

    GridView隐藏列visible="false" 后你就无法取得这列的值了 下面是迄今为止最简洁的解决方法了. protected void GVList_RowDataBou ...

  10. 黄学长模拟day1 大逃亡

    给出数字N(1<=N<=10000),X(1<=x<=1000),Y(1<=Y<=1000),代表有N个敌人分布一个X行Y列的矩阵上,矩形的行号从0到X-1,列号从 ...