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

2019-11-20 11:53:18

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

具体代码如下：

<!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程序设计有所帮助。

上一篇：jQuery基于ajax实现星星评论代码

下一篇：jQuery实现高亮显示网页关键词的方法