您的位置:首页 > Web前端 > JQuery

仿淘宝商城左侧分类导航菜单效果(平滑,高效,智能定位,jquery版)

2011-09-11 00:39 816 查看
[转/article/4742164.html]

仿淘宝商城 左侧分类导航菜单 效果(平滑,高效,智能定位,jquery版)





jquery实现:

$(document).ready(function () {
<!-- 鼠标进入-->
var g = $(".pop-subcategory");
$('.items').delegate("li", "mouseenter", function () {
$(".shadow").children().addClass("hidden");
var i = $("li").index(this);
var s = $(".shadow").children().eq(i);
s.removeClass("hidden");
$(this).addClass("selected");
$(".mallCategory").css("zIndex", 20);
g.removeClass("hidden");
<!--智能定位-->
var e = $(this);
var z = 20,
u = 0;
var C = e.offset(),
y = e.height(),
v = $(".mallCategory").offset(),
t = $(".pop-subcategory").height(),
w = $(window).height(),
q = $(window).scrollTop(),
r = w - t - (C.top - q),
x = Math.abs(C.top - q - v.top),
B = w - (C.top - q),
p = C.top - v.top;
if (r <= 0) {
r = Math.abs(r);
if (B > y) {
u = B - y;
if (u > z) {
p = p - r - z + 7;
} else {
p = p - r;
}
} else {
p = p - r + z + B + 20;
}
}
if (p < 0) {
p = 0;
}
$(".pop-subcategory").css("top", p + "px");
$(".shadow").children().eq(i).find('.lst-subcategory dl:first').addClass("first");
g.live("mouseenter", function () {
$('.items').children().removeClass("selected");
$('.items').children().eq(i).addClass("selected");
g.removeClass("hidden");
});
});
<!-- 鼠标移出后-->
$('.pop-subcategory').delegate("div.J_SubViewItem", "mouseleave", function () {
$(this).addClass("hidden");
g.addClass("hidden");
$('.items').children().removeClass("selected");
$(".mallCategory").css("zIndex", 15);
});

$('.items').delegate("li.J_MenuItem", "mouseleave", function () {
$(this).removeClass("selected");
g.addClass("hidden");
$(".mallCategory").css("zIndex", 15);
});
});


完毕!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: