CSS+JQuery实现的性感漂亮导航
导航效果预览图：http://dl.iteye.com/upload/attachment/165442/ede12277-b457-30cd-8ff4-a2f1c6a6cec2.jpg
1.demo.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><!-- the rest of the content--></div></div></body>
/** * @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]; var end = toArray(fx.end); fx.end = ,end]; fx.unit = ,end];} var nowPosX = []; nowPosX = ((fx.end - fx.start) * fx.pos) + fx.start + fx.unit; nowPosX = ((fx.end - fx.start) * fx.pos) + fx.start + fx.unit; fx.elem.style.backgroundPosition = nowPosX+' '+nowPosX; function toArray(strg){ strg = strg.replace(/left|top/g,'0px'); strg = strg.replace(/right|bottom/g,'100%'); strg = strg.replace(/(+)(\s|\)|$)/g,"$1px$2"); var res = strg.match(/(-?+)(px|\%|em|pt)\s(-?+)(px|\%|em|pt)/); return ,10),res,parseFloat(res,10),res]; } }});})(jQuery);
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 willstart 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;}
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%;}
页:
[1]