jQuery实现网页抖动的菜单抖动效果


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现网页抖动的菜单抖动效果。分享给大家供大家参考。具体如下:

这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$('body').shake( ),调用上述方法后,将鼠标移至指定的元素,该元素就会抖动。

运行效果截图如下:

jQuery实现网页抖动的菜单抖动效果

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { background-color: lightgreen; }
#demo, #demo *, #footer, #footer * { margin: 0; padding: 0; }
#demo, #footer { width: 70%; margin: 1em auto; font: normal 1em/1.4em 微软雅黑; }
#demo ul { list-style: none; overflow: hidden; background-color: rgb(241, 241, 241); padding: 1em 0; }
#demo ul li { float: left; width: 10%; text-align: center; cursor: pointer; padding: .3em 0; color: #262626; }
#demo ul li:hover { background-color: #D4D4D4; }
#msg { font-size: 1.2em; text-align: center; margin: 2em 0; }
#footer { font-size: .8em; }
#footer p { margin: .3em 0; }
#footer a { color: rgb(126, 34, 34); text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer a:visited { color: rgb(187, 166, 166); }
</style>
<title>jQuery抖动导航菜单效果</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.fn.shake = function (s) {
 var t = { rangeX: 2, rangeY: 2, rangeRot: 1, rumbleSpeed: 10, rumbleEvent: 'hover', posX: 'left', posY: 'top' }, u = $.extend(t, s);
 return this.each(function () {
  var $obj = $(this)
  , f
  , g = u.rangeX * 2
  , h = u.rangeY * 2
  , i = u.rangeRot * 2
  , j = u.rumbleSpeed
  , k = $obj.css('position')
  , l = u.posX
  , m = u.posY
  , n
  , o
  , p
  , q = { 'position': k, '-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)' };
  if (l === 'left') {
  n = parseInt($obj.css('left'), 10)
  }
  if (l === 'right') {
  n = parseInt($obj.css('right'), 10)
  }
  if (m === 'top') {
  o = parseInt($obj.css('top'), 10)
  }
  if (m === 'bottom') {
  o = parseInt($obj.css('bottom'), 10)
  }
  function rumbler(a) {
  var b = Math.random()
  , c = Math.floor(Math.random() * (g + 1)) - g / 2
  , d = Math.floor(Math.random() * (h + 1)) - h / 2
  , e = Math.floor(Math.random() * (i + 1)) - i / 2;
  if (a.css('display') === 'inline') {
   p = true;
   a.css('display', 'inline-block')
  }
  if (c === 0 && g !== 0) {
   c = b < .5 ? 1 : -1;
  }
  if (d === 0 && h !== 0) {
   d = b < .5 ? 1 : -1;
  }
  if (k === 'absolute') {
   a.css({ 'position': 'absolute', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });
   a.css(l, n + c + 'px');
   a.css(m, o + d + 'px')
  }
  if (k === 'fixed') {
   a.css({ 'position': 'fixed', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });
   a.css(l, n + c + 'px');
   a.css(m, o + d + 'px')
  }
  if (k === 'static' || k === 'relative') {
   a.css({ 'position': 'relative', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });
   a.css(l, c + 'px');
   a.css(m, d + 'px')
  }
  }
  if (u.rumbleEvent === 'hover') {
  $obj.hover(function () {
   var a = $(this);
   f = setInterval(function () {
   rumbler(a)
   }, j)
  }, function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
   a.css('display', 'inline')
   }
  });
  }
  if (u.rumbleEvent === 'click') {
  $obj.toggle(function () {
   var a = $(this);
   f = setInterval(function () {
   rumbler(a)
   }, j)
  }, function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
   a.css('display', 'inline')
   }
  });
  }
  if (u.rumbleEvent === 'mousedown') {
  $obj.bind({
   mousedown: function () {
   var a = $(this);
   f = setInterval(function () {
    rumbler(a)
   }, j)
   }, mouseup: function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
    a.css('display', 'inline')
   }
   }, mouseout: function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
    a.css('display', 'inline')
   }
   }
  });
  }
  if (u.rumbleEvent === 'constant') {
  var r = $(this);
  f = setInterval(function () {
   rumbler(r)
  }, j);
  }
 });
 }
}(jQuery));
</script>
</head>
<body>
 <div id="demo">
 <ul>
  <li>首页</li>
  <li>ASP</li>
  <li>PHP</li>
  <li>JSP</li>
  <li>DELPHI</li>
  <li>VC++</li>
  <li>C#</li>
  <li>VB</li>
  <li>.NET</li>
 </ul>
 <div id="msg">将鼠标移动到导航条上查看效果</div>
 </div>
 <script type="text/javascript">
 $('#demo li').shake();
 </script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
You might like
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
JavaScript中的this机制
2016/01/30 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
python如何输出反斜杠
2020/06/18 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
大四本科生的自我评价
2013/12/30 职场文书
小学生新学期寄语
2014/01/19 职场文书
国培计划培训感言
2014/03/11 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis