网站地图    收藏   

主页 > 设计 > 网页设计 >

仿淘宝天猫商品分类导航Jquery插件_交互设计教程

来源:自学PHP网    时间:2015-01-08 09:51 作者: 阅读:

[导读] ...

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

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

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

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

以上两步骤轻松搞定。。

效果如下:

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

(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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论