本文实例讲述了jQuery实现的Div窗口震动效果。分享给大家供大家参考。具体如下：

这是一款jQuery窗口震动效果代码，在Div边框内点击一下鼠标，它就开始震动了，适用浏览器：IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等。

运行效果截图如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>jquery窗口震动特效</title>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">

;(function($){

 var element = {};

 $.fn.jshaker = function(){

  element = $(this);

  element.css('position', 'relative');

  element.find('*').each(function(i, el){

   $(el).css('position', 'relative');

  });

 var iFunc = function(){ $.fn.jshaker.animate($(element)); };

 setTimeout(iFunc, 50);

 };

 $.fn.jshaker.animate = function(el){

  $.fn.jshaker.shake(el);

 el.find('*').each(function(i, el){

  $.fn.jshaker.shake(el);

 });

 var iFunc = function(){ $.fn.jshaker.animate(el); };

 setTimeout(iFunc, 50);

 }

 $.fn.jshaker.shake = function(el){

 var pos = $(el).position();

 if(Math.random() > 0.5){

  $(el).css('top', pos['top'] + Math.random() * 20 < 10 ? (Math.random() * 20 * (-1)) : Math.random() * 20);

 } else {

  $(el).css('left', pos['left'] + Math.random() * 20 < 10 ? (Math.random() * 20 * (-1)) : Math.random() * 20);

 }

 }

})(jQuery);

</script>

<script type="text/javascript">

 $(document).ready(function(){

  $('.block').click(function(){

  $(this).jshaker();

  });

 });

</script>

<style type="text/css">

BODY{font-family: "Lucida Grande", Arial, Helvetica, sans-serif;color: #666666;font-size: 12px;background: #FFFFFF;}

A{color: #0A8ECC;}

A: HOVER{text-decoration: none;color: #8FCB2F;}

H1{font-weight: normal;color: #0A8ECC;margin: 0;padding: 0;}

BODY{margin: 20px;padding: 20px;}

STRONG{color: #000000;}

.vspacer{height: 20px;}

PRE.code{padding: 7px;background: #777777;color: #F0F0F0;width: 400px;overflow: auto;}

#content-area{border: 3px solid #CCCCCC;background: #F0F0F0;padding: 10px;width: 500px;}

P.script-link{clear: both;padding: 10px 0;border-top: 1px dotted #CCCCCC;}

#content .block {float: left;border: 1px solid #CCCCCC;background: #F0F0F0;padding: 10px;margin: 10px;width: 300px;}

</style>

</head>

<body>

 <div id="page">

 <h1><a href="http://www.100sucai.com">jquery窗口震动特效</a></h1>

 <div id="content">

  <div class="block">

  <p>点击本框内，可实现震动。。</p>

  <ul>

   <li>Item 1</li>

   <li>Item 2</li>

   <li>

   Item 3

   <ul>

    <li><a href="http://www.100sucai.com/web/wangyezhizuo/javascript" title="javascript教程">javascript教程</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/css3" title="CSS3教程">CSS3教程</a></li>

  <li><a href="http://www.100sucai.com/web/wangyezhizuo/css" title="网页基础">网页基础</a></li>

  <li><a href="http://www.100sucai.com/web/program/php" title="php">php</a></li>

  <li><a href="http://www.100sucai.com/web/templates/html" title="html">html</a></li>

  <li><a href="http://www.100sucai.com/web/picture/image" title="图片表情">图片表情</a></li>

  <li><a href="http://www.100sucai.com/web/templates/mobile" title="手机网站模板">手机网站模板</a></li>

   </ul>

   </li>

   <li>Item 4</li>

   <li>Item 5</li>

  </ul>

  </div>

  <div class="block">

  <form action="#">

   <p><label for="inp1">Text Field 1:</label><input type="text" name="inp1" id="inp1" value="" /></p>

   <p><label for="inp2">Text Field 2:</label><input type="text" name="inp2" id="inp2" value="" /></p>

   <p><button type="submit">Submit</button></p>

  </form>

  </div>

 </div>

 <p class="script-link">

 </p>

 </div>

</body>

</html>

　　

jQuery实现的Div窗口震动效果实例的更多相关文章

  1. QT窗口渐现效果，窗口震动效果，鼠标移动窗口

    //窗口渐现效果void MainWindow::closeWindowAnimation() //关闭窗口效果 { QPropertyAnimation *animation = new QProp ...

  2. jQuery实现的表格展开伸缩效果实例

    <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>暂住地 ...

  3. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  4. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  5. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  6. DIV的摇晃效果---jquery实现

    DIV的摇晃效果---jquery实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. 使用jQuery创建模态窗口登陆效果

    日期:2013-8-22  来源:GBin1.com 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表 ...

  8. div拖拽效果 JQuery

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

  9. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

随机推荐

  1. notepad++查看aspx

    源地址:http://www.cnblogs.com/qingliuyu/archive/2012/03/12/2392633.html 对于.net项目,微软设计了很多独有的扩展名,如.aspx, ...

  2. C++学习11 类和new、delete操作符 类与const关键字

    如果你是Java.C#.PHP程序员,那么会对 new 非常熟悉,在这些编程语言中,只能通过 new 来创建对象. 在C++中,你可以像定义变量一样来创建对象,如: Student stu; //对象 ...

  3. 阻止Application_End事件的解决方案

    在做项目时,遇到同步ERP数据的问题,客户要求是:程序中,设置一个开始时间,再设置一个时间间隔,让程序每隔一段时间导出销售记录,这个开始时间和时间间隔可以手动修改设定.     这问题纠缠了我好几天, ...

  4. 解决WinForm(C#)中MDI子窗体最大化的问题

    “用MDI方式打开一个子窗口体后,总是不能最大化显示,明明子窗口体的WindowState设置为Maximized?”,相信有很多人会遇到这的样问题,请按下面的方法设置即可使MDI子窗体最大化: 1. ...

  5. POJ 2396 Budget【网络流】

    题意: cas           //测试数据组数 n m         //行数 列数 a1 a2 ... an    //每行的和 b1 b2 ... bn   //每列的和 q       ...

  6. ORACLE快速彻底Kill掉的会话（转载）

    转载:http://www.cnblogs.com/kerrycode/p/4034231.html 在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid ...

  7. PetaPoco修改

    else if (type == typeof(decimal)) return (decimal)pk == default(decimal); public override void PreEx ...

  8. 01-事件处理简介/UIView拖拽

    1.ios当中常见的事件?         触摸事件        加速计事件         远程控制事件2.什么是响应者对象?     继承了UIResponds的对象我们称它为响应者对象 UIA ...

  9. HDU1272

    http://acm.split.hdu.edu.cn/showproblem.php?pid=1272 对于这道题,只要找出形成的图是不是连通无环的图即可.即是判断输入的两个点是否来自同一个父亲结点 ...

  10. 转载 radio值获取

    选择控件:select ,radio,checkbox之用jquery获取选中值的小结 博客分类: jQuery select下拉框radio单选按钮checkbox多选框jquery获取选中的值  ...