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

前端技术 2023/09/08 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/22022

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案