cari

Rumah >hujung hadapan web >tutorial js >jQuery menyedari kesan gegaran menu pada halaman web shaking_jquery

jQuery menyedari kesan gegaran menu pada halaman web shaking_jquery

WBOY
WBOYasal
2016-05-16 15:46:271330semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery terhadap kesan jitter menu bagi jitter halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan menu navigasi goncang jQuery di sini serasi dengan IE7/8/9 dan penyemak imbas arus perdana yang lain: mula-mula memperkenalkan perpustakaan skrip jQuery dan fail jquery.shake.js, kemudian panggil kaedah shake() pada elemen yang diperlukan. Contohnya, jika anda ingin membuat seluruh halaman bergoncang, tulis: $('body').shake().

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut: 

<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery menggunakan animasi untuk mencipta contoh penggunaan animasi_jqueryArtikel seterusnya：jQuery menggunakan animasi untuk mencipta contoh penggunaan animasi_jquery

Artikel berkaitan

Lihat lagi