JavaScript
搜索
分类

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

作者：皮蛋 时间：2024-04-19 10:19:04　

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

标签：jQuery,抖动
0
投稿

猜你喜欢

  • python输出数组中指定元素的所有索引示例

    2021-11-27 02:21:09

  • MYSQL的binary解决mysql数据大小写敏感问题的方法

    2024-01-25 16:38:26

  • golang如何修改json文件内容的方法示例

    2024-04-26 17:32:44

  • pybind11和numpy进行交互的方法

    2021-08-18 23:24:14

  • Go使用Gin+mysql实现增删改查的详细实例

    2024-01-20 20:38:43

  • Python神经网络TensorFlow基于CNN卷积识别手写数字

    2022-06-18 20:23:00

  • Django 多对多字段的更新和插入数据实例

    2022-09-11 01:17:04

  • python3爬虫中异步协程的用法

    2021-11-01 01:16:02

  • PLSQL导入dmp文件的详细完整步骤

    2023-06-26 11:45:32

  • MySQL优化之如何查找SQL效率低的原因

    2024-01-12 21:03:55

  • Tensorflow 2.1完成对MPG回归预测详解

    2023-06-30 07:31:36

  • 简介二分查找算法与相关的Python实现示例

    2023-05-13 12:16:45

  • IE7的web标准之道 Ⅱ

    2008-08-13 12:50:00

  • JavaScript闭包详解

    2024-04-19 10:06:52

  • JavaScript中的ArrayBuffer详细介绍

    2024-04-19 11:02:13

  • Keras框架中的epoch、bacth、batch size、iteration使用介绍

    2023-10-13 13:15:13

  • 浅谈pandas dataframe对除数是零的处理

    2023-03-26 10:35:30

  • keras的get_value运行越来越慢的解决方案

    2023-10-22 14:53:49

  • 自学python的建议和周期预算

    2021-10-07 04:38:09

  • spyder常用快捷键(分享)

    2021-04-01 16:18:17
    • asp之家 网络编程 m.aspxhome.com