CSS+JQuery实现的性感漂亮导航

cpine · 发表于 2013-2-8 00:26:09

1.demo.html
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>slick animated menu</title>  <link rel="stylesheet" href="css/main.css" type="text/css" /><script type="text/javascript" src="js/jquery.js" ></script><script type="text/javascript" src="js/jquery-bp.js" ></script><script type="text/javascript" src="js/navigation.js" ></script></head><body><div id="header"></div><div id="navigation" class="container"><div id="home" class="pri-nav active"><div><a href="home">home</a></div></div><div id="about" class="pri-nav"><div><a href="about">about</a></div></div><div id="services" class="pri-nav"><div><a href="services">services</a></div></div><div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div><div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div></div><div class="container"><div class="content"><div id="content-title"></div></div></div></body>
JS代码：
/** * @author Alexander Farkas * v. 1.02 */(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]];          }       }});})(jQuery);

Js代码
var site_url = '';var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];$(document).ready(function(){setBkgPos();for ( i = 0; i < nav.length; i++ ) {$(nav).bind( 'mouseover', mMouseOver );$(nav).bind( 'mouseout', mMouseOut );$(nav).bind( 'click', mClick );}for ( i = 0; i < nav.length; i++ ) {// element with 慳ctive?class will  start animation if ( $(nav).get(0).className.indexOf('active') >= 0 ){$(nav).animate({ backgroundPosition:'(' + _getHPos( nav ) +'px -30px}'},"fast",function(){ $(this).children().animate({backgroundPosition:'(0px -40px)'},20).animate({backgroundPosition:'(0px -20px)'},"fast");$(this).animate({backgroundPosition:'(' + _getHPos( nav ) +'px 50px)'},"fast").animate({backgroundPosition:'(' + _getHPos( nav ) +'px 25px)'},"fast");var parent = this;$(this).children().animate( {backgroundPosition:'(0px -45px)'},"fast",function(){$(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");$(parent).css({backgroundImage: 'url(img/nav.png)'});});});break;}}}); function _getHPos( id ){for ( i = 0; i < nav.length; i++ ){if ( '#' + id == nav ){return i*(-98);}}return 0;}function setBkgPos(){for ( i = 0; i < nav.length; i++ ){$(nav).css({backgroundPosition: i*(-98) + 'px -25px'});$(nav + ' div').css({ backgroundPosition: '0px -60px'});}}function mMouseOver(e){// element with 慳ctive?class will ignore this event and do nothingif ( this.className.indexOf('active') >= 0  ){return;}$(this)// stop any animation that took place before this.stop()// step 1. change the image file.css({backgroundImage: 'url(img/nav-over.png)',cursor: 'pointer'})// step.2 move up the navigation item a bit.animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",// this section will be executed after the step.2 is donefunction(){ $(this).children()// step. 3 move the white box down.animate({backgroundPosition:'(0px -40px)'},20)// step 4. move the white box down.animate({backgroundPosition:'(0px -20px)'},"fast");$(this)// step 4. move the navigation item down.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")// step 5. move the navigation item to its final position.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");// store the parent element id for later usagevar parent = this;$(this).children()// step 5. move the white box to its final position.animate( {backgroundPosition:'(0px -45px)'},"fast",// this section will be executed after the step.5 is donefunction(){// step.6 change the image to its original image$(parent).css({backgroundImage: 'url(img/nav.png)'});});});}function mMouseOut(e){// element with 慳ctive?class will ignore this event and do nothingif ( this.className.indexOf('active') >= 0  ){return;}$(this)// stop any animation that took place before this.stop()// step.1 move down navigation item.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast", // this section will be executed after the step.1 is donefunction(){// step.2 white box move really fast$(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");// step 3. move navigation item up$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast", // this section will be executed after the step.3 is donefunction(){// step 4. move navigation item ot its original position$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",// this section will be executed after the step.4 is donefunction(){// move white box to its original position, ready for next animation$(this).children().css({ backgroundPosition:'0px -60px'});})})}).css({backgroundImage: 'url(img/nav.png)', cursor: ''});}function mClick(e){location.href = this.id;}
Css代码
body {background: url(../img/body-bkg.png) repeat scroll;margin: 0;padding: 0;}.container{margin: 0pt auto;width:950px;}#header{background: url(../img/hdr-bkg.png) repeat-x scroll;height:181px;position:absolute;z-index :100;top: 0px;left:0px;width:100%;}#navigation{height:60px;}#home, #home div, #about, #about div, #services , #services div, #solutions, #solutions div, #contact,  #contact div {height:80px;position:absolute;width:97px;float:left;}#home, #about, #services, #solutions, #contact{background-image: url(../img/nav.png);background-attachment: scroll;background-repeat: no-repeat;top:171px;}#home{background-position: 0px -25px;margin-left:6px;}#about{background-position: -98px -25px;margin-left:105px;}#services{background-position: -196px -25px;margin-left:204px;}#solutions{background-position: -294px -25px;margin-left:303px;}#contact{background-position: -392px -25px;margin-left:402px;}#home div, #about div, #services div, #solutions div, #contact div {background-image: url(../img/white.png);background-attachment: scroll;background-repeat: no-repeat;background-position: 0px -60px;}.pri-nav a{display:block;text-decoration:none;text-indent:-30000px;}.content{margin-top:160px;}#content-title{background: url(../img/content-title.png) no-repeat scroll;height:323px;position:absolute;width:100%;}

		自动登录	找回密码
密码			立即注册