Simple happiness

jquery动感菜单（导航）代码

其实菜单（或说导航条？）有很多种，不是非要jquery不可，但有时这种菜单确实做得漂亮，虽然我下面这个菜单很简单，也是网上多个例子中的一个，但对我很实用，机制无非是用一张大图做背景，然后通过jquery来步进的移动这张背景图，造成动感。代码中的背景图没有附上，如果您喜欢，可以自己搞一张。大小嘛，199px X 100px。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Menu</title>


<style type="text/css">

	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(bg2.jpg) repeat 0 0;}

	li a:hover, li a:focus, li a:active {background-position:-150px 0;}

	#menu a {background:url(bg.jpg) repeat -20px 35px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){

	$('#menu 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"})

			}})

		})

});

$(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(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);

               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];

           }

        }

	});

});

</script>

</head> <body> <div> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>