suchen

Heim >Web-Frontend >js-Tutorial >jQuery realisiert den Menü-Shaking-Effekt von Webseiten-Shaking_jquery

jQuery realisiert den Menü-Shaking-Effekt von Webseiten-Shaking_jquery

WBOY
WBOYOriginal
2016-05-16 15:46:271330Durchsuche

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des Menü-Jitter-Effekts des Webseiten-Jitters. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der jQuery-Shake-Navigationsmenüeffekt ist hier mit IE7/8/9 und anderen Mainstream-Browsern kompatibel. Verwendung: Führen Sie zuerst die jQuery-Skriptbibliothek und die Datei jquery.shake.js ein und rufen Sie dann die Methode shake() auf Wenn Sie beispielsweise die gesamte Seite zum Wackeln bringen möchten, schreiben Sie: $('body').shake() Nachdem Sie die obige Methode aufgerufen haben, bewegen Sie die Maus auf das angegebene Element, und das Element wackelt.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!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 &#63; 1 : -1;
  }
  if (d === 0 && h !== 0) {
   d = b < .5 &#63; 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>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery verwendet animate, um Animationsverwendungsbeispiele_jquery zu erstellenNächster Artikel：jQuery verwendet animate, um Animationsverwendungsbeispiele_jquery zu erstellen

In Verbindung stehende Artikel

Mehr sehen