本文实例讲述了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. cocoaPods 去警告

    pod 'ReactiveCocoa', '~> 2.1', :inhibit_warnings => true

  2. ruby中的reject和reject!

    reject和reject!reject返回不满足代码块的元素数组reject!删除数组中满足代码块的元素 a=[1,2,3,5]a.reject! {|x| x<4}p a #[5] b = ...

  3. Ubuntu下tftp服务搭建

    1.安装软件包 sudo apt-get install tftpd tftp xinetd 2.建立配置文件 在/etc/xinetd.d/下建立一个配置文件tftp sudo vi /etc/xi ...

  4. springmvc使用pojo和servlet原生api作为参数

    一.Pojo作为参数: 实体: package com.hy.springmvc.entities; public class User { private String username; priv ...

  5. Go Mobile 例子 basic 源码分析

    OpenGL ES(OpenGL for Embedded Systems)是 OpenGL 三维图形API的子集,针对手机.PDA和游戏主机等嵌入式设备而设计.该API由Khronos集团定义推广, ...

  6. Eclipse 常用设置

    1. eclipse中的汉字横着显示怎么解决 同一种字体有两种显示方式,比如Fixedsys Excelsior 3.01和@Fixedsys Excelsior 3.01,前一种汉字是竖着显示,后一 ...

  7. POJ 2104 【主席树】【区间第K大】

    #include<stdio.h> #include<algorithm> #include<string.h> #define MAXN 100010 #defi ...

  8. 关于前置式递增和后置式递增的小知识（++x与x++）

    list<char>::iterator pos; //list<char> coll; for(pos=coll.begin();pos!=coll.end();++pos) ...

  9. JQuery基础教程：选择元素（中）

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  10. UITableViewCell之微博篇

    微博篇 本应用所涉及的知识点: 1.UITableView 中的cell 2.模型的创建 3.MJExtension第三方框架的使用 需求分析 1.界面分析 微博界面 界面控件分析: 整个页面 1.不 ...