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
页:
[1]