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