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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
又一个php 分页类实现代码
2009/12/03 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python excel和yaml文件的读取封装
2021/01/12 Python
介绍一下如何优化MySql
2016/12/20 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
行风评议整改报告
2014/11/06 职场文书
创先争优承诺书
2015/01/20 职场文书
太空授课观后感
2015/06/17 职场文书
公司与个人合作协议书
2016/03/19 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
如何Python使用re模块实现okenizer
2022/04/30 Python