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. Why is applicationhost.config still being added to source control even thought it's in gitignore

      Why is applicationhost.config still being added to source control even thought it's in gitignore g ...

  2. Python-面向对象编程(一)

    初识面向对象: Python中一切皆对象,我自己,我的电脑,电脑桌,都称之为一个对象.对象是类的一个实体. 我们可以通过行为和特征(属性)来描述一个对象,比如小狗,它有四条腿,一个尾巴,两个虎牙,这就 ...

  3. BootStrap学习------栅格

    使用Bootstrap前端框架-栅格 要点 1.使用Bootstrap需要引入的css和js: (1)bootstrap.min.js (2)bootstrap.min.css 2.栅格系统需要通过& ...

  4. centos 命令大全

    文件操作: ls      ####查看目录中的文件#### ls -F       ####查看目录中的文件#### ls -l       ####显示文件和目录的详细资料#### ls -a   ...

  5. ng-repeat指令使用详解

    ng-repeat指令使用详解 link: function(scope,element,attr) scope.$index: if(scope.$last == true){} attr['mng ...

  6. 如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?

    1. 只需要引入 jquery-ui 的主css文件: jquery-ui.css 文件?? 不需要 引入 jquery-ui-structure/theme.css文件??? ,,,,, 2. 一定 ...

  7. Linux 下新增虚拟内存

    问题描述,电脑内存1G.在启用elasticsearch的时候,报错 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memor ...

  8. 第24天 runtime

    面试时被问到一个问题,如何实现weak变量的自动置nil?当时也不知道. 今天在实现target-action模式时,如何调用SEL,刚开始只会PerformSelector,但不能传递多个参数,后来 ...

  9. php curl 库使用

    支持http basic认证: curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_USERPWD ...

  10. C++之通用队列模版

    功能:在qtcreator上用模版的方式实现队列数据格式存储多样化. 模版实现的两种方式: 1.模版的实现直接在头文件里声明并定义,别的类通过#include"*.h"进行包含,则 ...