js实现菜单栏上下旋转动画效果
原始图片：
当鼠标放到”首页”上时：
<
div
id
="menu2"
class
="menu">
<
ul
>
<
li
><
a
href
="index.aspx">
首 页
</
a
></
li
>
<
li
><
a
href
="news.aspx">
实时资讯
</
a
></
li
>
</
ul
>
</
div
>
<
script
src
="js/jquery-1.7.2.min.js"
type
="text/javascript"></
script
>
<
script
type
="text/javascript"
language
="javascript">
var
$jq = jQuery.noConflict();
$jq(
$jq(document).ready(
function
() {
/* 1st example */
/// wrap inner content of each anchor with first layer and append background layer
$jq(
"#menu1 li a"
).wrapInner(
'<span class="out"></span>'
).append(
'<span class="bg"></span>'
);
// loop each anchor and add copy of text content
$jq(
"#menu1 li a"
).each(
function
() {
$jq(
'<span class="over">'
+ $jq(
this
).text() +
'</span>'
).appendTo(
this
);
});
$jq(
"#menu1 li a"
).hover(
function
() {
// this function is fired when the mouse is moved over
$jq(
".out"
,
this
).stop().animate({
'top'
:
'40px'
}, 250);
// move down - hide
$jq(
".over"
,
this
).stop().animate({
'top'
:
'0px'
}, 250);
// move down - show
$jq(
".bg"
,
this
).stop().animate({
'top'
:
'0px'
}, 120);
// move down - show
},
function
() {
// this function is fired when the mouse is moved off
$jq(
".out"
,
this
).stop().animate({
'top'
:
'0px'
}, 250);
// move up - show
$jq(
".over"
,
this
).stop().animate({
'top'
:
'-40px'
}, 250);
// move up - hide
$jq(
".bg"
,
this
).stop().animate({
'top'
:
'-40px'
}, 120);
// move up - hide
});
/* 2nd example */
$jq(
"#menu2 li a"
).wrapInner(
'<span class="out"></span>'
);
$jq(
"#menu2 li a"
).each(
function
() {
try
{
var
urlName = window.location.pathname
//
获取当前
URL
var
param = urlName.split(
"/"
)[1];
if
($jq(
this
).attr(
"href"
) == param) {
$jq(
this
).attr(
"class"
,
"over"
);
}
$jq(
'<span class="over">'
+ $jq(
this
).text() +
'</span>'
).appendTo(
this
);
}
catch
(e) {
}
finally
{
}
});
$jq(
"#menu2 li a"
).hover(
function
() {
$jq(
".out"
,
this
).stop().animate({
'top'
:
'40px'
}, 300);
// move down - hide
$jq(
".over"
,
this
).stop().animate({
'top'
:
'0px'
}, 300);
// move down - show
},
function
() {
$jq(
".out"
,
this
).stop().animate({
'top'
:
'0px'
}, 300);
// move up - show
$jq(
".over"
,
this
).stop().animate({
'top'
:
'-40px'
}, 300);
// move up - hide
});
})
)
</
script
>