本文实例讲述了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. winform窗体的关闭与资源的释放

    单纯的this.Dispose(); this.Close();有时候并不能释放出所用资源.因为Dispose()方法,虽然能释放当前窗体的资源,却不能强制结束循环,  要想强制突出当前程序要用:Sy ...

  2. AJAX跨域调用相关知识-CORS和JSONP

    1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去 ...

  3. C++学习21 基类和派生类的赋值

    在C/C++中,经常会发生数据类型转换,例如整型数据可以赋值给浮点型变量,在赋值之前,先把整型数据转换为浮点型:反过来,浮点型数据也可以赋值给整型变量. 数据类型转换的前提是,编译器知道如何对数据进行 ...

  4. 数组排序-冒泡排序-选择排序-插入排序-希尔排序-快速排序-Java实现

    这五种排序算法难度依次增加. 冒泡排序: 第一次将数组相邻两个元素依次比较,然后将大的元素往后移,像冒泡一样,最终最大的元素被移到数组的最末尾. 第二次将数组的前n-1个元素取出,然后相邻两个元素依次 ...

  5. Matlab学习：读取指定文件夹及其五级子文件夹内的文件

    OpenCV2.4.X版本提供了三个函数来读取指定目录内的文件,它们分别是: (1)GetListFiles:读取指定目录内所有文件,不包含子目录: (2)GetListFilesR:读取指定目录及其 ...

  6. nyoj 73 比大小

    点击打开链接 比大小 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 给你两个很大的数,你能不能判断出他们两个数的大小呢? 比如123456789123456789要大于 ...

  7. 分布式消息队列的使用kakfa

    作用: 1.系统解耦 2.通过消息可以减少系统的处理压力,做一个缓冲 3.原理基于生存者消费者的模式 4.两种场景:队列(端对端 一对一).主题(一对多,广播模式) 5.消息:header.body构 ...

  8. github里的gist是什么意思

    在有关github的客户端中经常遇到gist这个词,如Gists->My Gists,Public Gists. 字典里解释gist为(发言.谈话或文章的)主旨,要点.百度百科的解释太恶心,我不 ...

  9. 项目积累——js应用

    //解决由前台向后台传值中文乱码的问题 encodeURI($("#xmjhbgFile").val())//前台JS中数据加码 String fjmc = java.net.UR ...

  10. OpenStack和Redis

    前言: 最近开始捣鼓OpenStack了,在用RDO部署OpenStack的时候,发现装了Redis, 遂决定看看OpenStack哪些地方(可以)用到Redis.  Redis作为OpenStack ...