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. zencart分类页产品页去掉url中的id号

    最近公司新上的网站被seo指出要修改url,去掉url中产品id.由于我们用的是zencart框架,装了 Ultimate SEO URLs 插件,所以在网上应该有这方面的资料,本文主要参考资料: 原 ...

  2. Database Schema Reader

    数据架构与INSERT脚本生成 https://dbschemareader.codeplex.com/wikipage?title=Writing%20Data&referringTitle ...

  3. JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...

  4. 浅谈JavaScript中的this

    引言 JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScri ...

  5. intelligencia.urlrewriter使用

    见github: https://github.com/sethyates/urlrewriter

  6. XSHELL下直接下载文件到本地(Windows)

    xshell很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz 首先你的Ubuntu需要安装rz.sz(如果没有安装请执行以下命令,安装完的请跳过. ...

  7. codeforces #270 ABCD

    Codeforces Round #270 A - Design Tutorial: Learn from Math 题意:给出n,求出两个合数x和y使x+y=n. 题解:暴力筛合数,然后暴力找 // ...

  8. oracle 中的round（）函数、null值，rownum

    round()函数:四舍五入函数 传回一个数值,该数值按照指定精度进行四舍五入运算的结果. 语法:round(number[,decimals]) Number:待处理的函数 Decimals:精度, ...

  9. 用友android

    获取token要改 value要改 不用通配符 直接双引号

  10. 【Auto Layout】Xcode6及以上版本，创建Auto Layout 约束时产生的一些变化【iOS开发教程】

    [#Auto Layout#]Xcode6创建Auto Layout 约束时产生的一些变化     通过两个小Demo来展示下变化: Demo1需求: 为控制器的根视图(图中的“控制器View”)的子 ...