CSS精髓2:JS的回归

 

     来源： OurJS.cn    原文： http://www.ourjs.cn/show.php?id=449

 

   2004 年 3 月， Dave Shea 写了一篇经典文章《 CSS Sprites 》，现在他使用 JavaScript同样能创造出完美的视角效果。

(要了解更多Dave Shea，可以点击这里 )

 

 

JAVASCRIPT:

$(document).ready( function () {

    // remove link background images since we're re-doing the hover interaction below

    // (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)

    // we also want to only remove the image on non-selected nav items, so this is a bit more complicated

    $( ".nav" ).children( "li" ).each( function () {

       var current = "nav current-" + ($( this ).attr( "class" ));

       var parentClass = $( ".nav" ).attr( "class" );

       if (parentClass != current) {

          $( this ).children( "a" ).css( { backgroundImage: "none" } );

       }

    } );    

    // create events for each nav item

    attachNavEvents( ".nav" , "home" );

    attachNavEvents( ".nav" , "about" );

    attachNavEvents( ".nav" , "services" );

    attachNavEvents( ".nav" , "contact" );

    function attachNavEvents(parent, myClass) {

       $(parent + " ." + myClass).mouseover( function () {

          $( this ).append( '<div class="nav-' + myClass + '"></div>' );

          $( "div.nav-" + myClass).css( { display: "none" } ).fadeIn(200);

       } ).mouseout( function () {

          $( "div.nav-" + myClass).fadeOut(200, function () {

              $( this ).remove();

          } );

       } ).mousedown( function () {

          $( "div.nav-" + myClass).attr( "class" , "nav-" + myClass + "-click" );

       } ).mouseup( function () {

          $( "div.nav-" + myClass + "-click" ).attr( "class" , "nav-" + myClass);

       } );

    }

} );

 

来源： OurJS.cn    原文： http://www.ourjs.cn/show.php?id=449