<!DOCTYPE html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=gbk"
/>
<title>jQuery动态背景导航菜单</title>
<style type=
"text/css"
>
h2{clear: both;padding-top: 20px;}
ul{list-style: none;margin: 0;padding: 0;}
li{float: left;width: 100px;margin: 0;padding: 0;text-align: center;}
li a{display: block;padding: 5px 10px;height: 100%;color:
#FFF;text-decoration: none;border-right: 1px solid #FFF;}
li a{background: url(images/bg2.jpg) repeat 0 0;}
li a: hover, li a: focus, li a: active{background-position: -150px 0;}
#a a{background: url(images/bg.jpg) repeat -20px 35px;}
#b a{background: url(images/bg2.jpg) repeat 0 0;}
#c a{background: url(images/bg3.jpg) repeat 0 0;}
#d a{background: url(images/bg4.jpg) repeat 0 0;}
</style>
<script type=
"text/javascript"
src=
"jquery-1.6.2.min.js"
></script>
<script type=
"text/javascript"
>
(
function
($) {
$.extend($.fx.step,{
backgroundPosition:
function
(fx) {
if
(fx.state === 0 &&
typeof
fx.end ==
'string'
) {
var
start = $.curCSS(fx.elem,
'backgroundPosition'
);
start = toArray(start);
fx.start = [start[0],start[2]];
var
end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var
nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+
' '
+nowPosX[1];
function
toArray(strg){
strg = strg.replace(/left|top/g,
'0px'
);
strg = strg.replace(/right|bottom/g,
'100%'
);
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,
"$1px$2"
);
var
res = strg.match(/(-&
#63;[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return
[parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
</script>
<script type=
"text/javascript"
>
$(
function
(){
$(
'#a a'
)
.css( {backgroundPosition:
"-20px 35px"
} )
.mouseover(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(-20px 94px)"
}, {duration:500})
})
.mouseout(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(40px 35px)"
}, {duration:200, complete:
function
(){
$(
this
).css({backgroundPosition:
"-20px 35px"
})
}})
})
$(
'#b a'
)
.css( {backgroundPosition:
"0 0"
} )
.mouseover(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(-150px 0)"
}, {duration:500})
})
.mouseout(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(-300px 0)"
}, {duration:200, complete:
function
(){
$(
this
).css({backgroundPosition:
"0 0"
})
}})
})
$(
'#c a'
)
.css( {backgroundPosition:
"0 0"
} )
.mouseover(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(0 -250px)"
}, {duration:500})
})
.mouseout(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(0 0)"
}, {duration:500})
})
$(
'#d a'
)
.css( {backgroundPosition:
"0 0"
} )
.mouseover(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(0 -250px)"
}, {duration:500})
})
.mouseout(
function
(){
$(
this
).stop().animate({backgroundPosition:
"(0 0)"
}, {duration:500})
})
});
</script>
<meta http-equiv=
"Content-Type"
content=
"text/html;charset=gbk"
>
</head>
<body>
<h1>jQuery Background Position</h1>
<h2>Example 0: No Script</h2>
<ul id=
"noscript"
>
<li><a href=
"#"
>Home</a></li>
<li><a href=
"#"
>About</a></li>
<li><a href=
"#"
>Contact</a></li>
</ul>
<h2>Example A: Top down</h2>
<ul id=
"a"
>
<li><a href=
"#"
>Home</a></li>
<li><a href=
"#"
>About</a></li>
<li><a href=
"#"
>Contact</a></li>
</ul>
<h2>Example B: Right left</h2>
<ul id=
"b"
>
<li><a href=
"#"
>Home</a></li>
<li><a href=
"#"
>About</a></li>
<li><a href=
"#"
>Contact</a></li>
</ul>
<h2>Example C: Fade 1-colour</h2>
<ul id=
"c"
>
<li><a href=
"#"
>Home</a></li>
<li><a href=
"#"
>About</a></li>
<li><a href=
"#"
>Contact</a></li>
</ul>
<h2>Example D: Fade 2-colour</h2>
<ul id=
"d"
>
<li><a href=
"#"
>Home</a></li>
<li><a href=
"#"
>About</a></li>
<li><a href=
"#"
>Contact</a></li>
</ul>
</body>
</html>