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

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