jQuery实现的Div窗口震动效果实例


Posted in Javascript onAugust 07, 2015

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

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

运行效果截图如下:

jQuery实现的Div窗口震动效果实例

具体代码如下:

<!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>jquery窗口震动特效</h1>
 <div id="content">
  <div class="block">
  <p>点击本框内,可实现震动。。</p>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>
   Item 3
   <ul>
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
    <li>Sub Item 3</li>
    <li>Sub Item 4</li>
    <li>Sub Item 5</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程序设计有所帮助。

Javascript 相关文章推荐
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
js中apply与call简单用法详解
2017/11/06 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python检测网站链接是否已存在
2016/04/07 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python Django view 两种return的实现方式
2020/03/16 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
汽车专业毕业生自荐信
2013/11/03 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
电气自动化求职信
2014/06/24 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书