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