本文实例讲述了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. [C语言]（二）01 获取Windows图形构件大小信息

    SYSMETS.c #include <windows.h> #include "SYSMETS.H"//自定义的单元,所以用"",不是用<& ...

  2. Python进阶06 循环对象

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 这一讲的主要目的是为了大家在读Python程序的时候对循环对象有一个基本概念. 循 ...

  3. [ActionScript 3.0] AS3.0根据当天日期获取明天，后天...日期

    const dayTime:Number=24*3600*1000//一天毫秒数 var date:Date = new Date(); trace("今天:"+ date.toD ...

  4. SQL日期格式

    ) :: ),'-',''),' ',''),':','') ) , ) ) , ) ) , ) ) , ) 其它不常用的日期格式转换方法: ) , ) ) , ) ) , ) ) , ) ) , ) ...

  5. jQuery制作图片的等比例缩放

    1资料的排版 2.html代码 <body> <div class="BB"><img src="dw.jpg" alt=&quo ...

  6. 解决tomcat默认45s启动超时的问题

    进入工作空间目录下的.metadata\.plugins\org.eclipse.wst.server.core子目录,找到servers.xml文件,编辑它,找到start-timeout这一行,把 ...

  7. nyoj 61 传纸条

    点击打开链接 传纸条(一) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做 ...

  8. Unity中对象池的使用

    unity中用到大量重复的物体,例如发射的子弹,可以引入对象池来管理,优化内存. 对象池使用的基本思路是: 将用过的对象保存起来,等下一次需要这种对象的时候,再拿出来重复使用.恰当地使用对象池,可以在 ...

  9. jstl的mavin依赖

    pom.xml中加入 <!-- jstl支持 --><dependency>    <groupId>javax.servlet</groupId>   ...

  10. 推荐一个代码生成工具：freemarker

    freemarker:http://freemarker.org/ 还有velocity:http://velocity.apache.org/