本文实例讲述了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. spring循环引用的问题

    很久没写技术贴了,这两天被spring的循环引用搞死了,发文记之. 前几天,项目结构做了调整,把我所在的项目代码嵌入另一个项目,然后就杯具了,症状如下: Bean with name ‘xxxServ ...

  2. embed标签的使用(在网页中播放各种音频视频的插件的使用)

    播放器插件使用说明: 代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路 ...

  3. 华为ICDcomm接口js测试

    1)获取坐席状态接口调用方法: “方法”------“坐席与班组” 中的 Phone.QueryAgentStatusEx(工号)如果该方法调用成功,那么坐席状态将会存入到属性: Phone.Agen ...

  4. 使用PHP得到所有的HTTP请求头_还有应答头

    1)如何获取 客户端请求的头部 参考网站: http://www.neatstudio.com/show-377-1.shtml PHP中一般采用getallheaders来获取头部,但事实上,有些模 ...

  5. 第一个jave程序-helloworld

    1.打开myeclipse,其中有个select a workspase的过程,即选择工作空间,这里需要更换空间,不要放C盘,防止项目越来越大占用C盘的空间 2.创建java工程 3.取工程名,填写自 ...

  6. [HDU 4787] GRE Words Revenge (AC自动机)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4787 题目大意: 给你若干个单词,查询一篇文章里出现的单词数.. 就是被我水过去的...暴力重建AC自 ...

  7. @Required @Autowired @Resource注解详解

    一.@Required注解用于检查特定的属性是否设置 1.RequiredAnnotationBeanPostProcessor 为该注解的处理器,即bean后置处理器,检查所有带有该解的bean属性 ...

  8. java 计算 文件 md5

    public class MD5Check { /** * 默认的密码字符串组合,用来将字节转换成 16 进制表示的字符,apache校验下载的文件的正确性用的就是默认的这个组合 */     pro ...

  9. iOS中常见的设计模式——单例模式\委托模式\观察者模式\MVC模式

    一.单例模式 1. 什么是单例模式? 在iOS应用的生命周期中,某个类只有一个实例. 2. 单例模式解决了什么问题? 想象一下,如果我们要读取文件配置信息,那么每次要读取,我们就要创建一个文件实例,然 ...

  10. Flex 使用列表和表格

    Flex 设计了不同的控件来实现列表和表格,不仅能够将数据显示在表格和列表中,还可以实现对数据进行操纵,修改等更加强大的功能. 与列表和表格相关的控件如下所示: 列表控件(List Control): ...