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 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
JS解析url查询参数的简单代码
Aug 06 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
javascript实现手动点赞效果
Apr 09 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Django 导出 Excel 代码的实例详解
2017/08/11 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
C#中的验证控件有几种
2014/03/08 面试题
怎样写好创业计划书的内容
2014/02/06 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
个人融资协议书
2014/10/02 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
python开发人人对战的五子棋小游戏
2022/05/02 Python