手机
当前位置:查字典教程网 >网页设计 >交互设计教程 >仿淘宝天猫商品分类导航Jquery插件
仿淘宝天猫商品分类导航Jquery插件
摘要:此Jquery插件又是一款给力、实用的商品分类导航,兼容IE6,IE7IE8及以上Firefox,Chrome等主流浏览器,是电子商务网站不...

此 Jquery插件又是一款给力、实用的商品 分类导航,兼容IE6, IE7 IE8及以上 Firefox,Chrome等主流浏览器,是电子商务网站不可缺少的神兵利器之一。

使用非常简单,步骤如下:

1、引入Jquery插件文件jquery.tmailsilder.v2.js

2、页面写一行初始化代码即可($('#Z_TMAIL_SIDER_V2').Z_TMAIL_SIDER_V2();)

以上两步骤轻松搞定。。

效果如下:

仿淘宝天猫商品分类导航Jquery插件1

(function($) {

$.fn.Z_TMAIL_SIDER_V2 = function(options) {

var opts = $.extend( {}, $.fn.Z_TMAIL_SIDER_V2.defaults, options);

var base = this;

var thisTitle = $(base).find(‘.allcategorys’);

var Z_SubList = $(base).find(‘.sublist’);

var navPosTop = $(base).offset().top;

var timeOut = null;

$(thisTitle).find(‘.title-item-hd a’).hover(function(e) {

clearTimeout(timeOut);

var thisLi = this;

if($(Z_SubList).is(‘:visible’)) return;

showSubList(thisLi);

e.stopPropagation();

}, function(e) {

var thisLi = this;

timeOut = setTimeout(function() {

hideSubList(thisLi);

}, 100);

$(Z_SubList).hover(function(e){

clearTimeout(timeOut);

}, function() {

clearTimeout(timeOut);

timeOut = setTimeout(function() {

hideSubList(thisLi);

}, 100);

});

e.stopPropagation();

});

var showSubList = function(thisli) {

var top = $(thisli).height() - opts.slideHeight;

$(thisli).addClass(‘curr’).find(‘s’).addClass(‘curr’);

$(Z_SubList).css({top: top, opacity: 0}).show().stop().animate({top: $(thisli).height(), opacity : 1});

};

var hideSubList = function(thisli) {

$(thisli).removeClass(‘curr’).find(‘s’).removeClass(‘curr’);

$(Z_SubList).hide();

};

$(window).resize(function() {

var sTop = $(window).scrollTop();

if(sTop >= navPosTop) {

if($.browser.msie && $.browser.version < 7){

$(base).css({position: ‘absolute’, top: sTop});

}else {

$(base).css({position: ‘fixed’, top: 0});

}

}else {

$(base).css({position: ‘relative’, top: 0});

}

});

$(window).scroll(function() {

var sTop = $(window).scrollTop();

if(sTop >= navPosTop) {

if($.browser.msie && $.browser.version < 7){

$(base).css({position: ‘absolute’, top: sTop});

}else {

$(base).css({position: ‘fixed’, top: 0});

}

}else {

$(base).css({position: ‘relative’, top: 0});

}

});

};

$.fn.Z_TMAIL_SIDER_V2.defaults = {

slideHeight : 8

};

})(jQuery);

文:http://www.jq-school.com/Detail.aspx?id=144

【仿淘宝天猫商品分类导航Jquery插件】相关文章:

超详的GOOGLE GLASS界面设计指南

如何搞定界面设计-构图篇

网页设计中常见的错误

网页设计中的GRUNGE

针对京东网站改版谈谈网页设计趋势

淘宝设计师经验分享

五种移动应用导航设计总结

21个突破流行的UI界面

让大神传授你BANNER设计中的“辟邪剑谱”

36个亮色调的顶尖网站设计

精品推荐
分类导航