这个导航是如何实现的

Question

jquery ui用有你需要的滑块控件

Answer 1

http://www.adjust.be/js/library/Navigation.js这个js文件，但是还依赖了好多其他文件

Answer 2

是啊
我自己还是在lavalamp插件的基础上自己简单改了点。

Answer 3

话说firebug里根本没有这个js
只有看源代码才发现这个js，还是被注释掉了的。

Answer 4

/**
 
//console.log();
(function($) {
jQuery.fn.lavaLamp = function(o) {
o = $.extend({
'target': 'li',
'container': '',
'fx': 'swing',
'speed': 500, 
'click': function(){return true}, 
'startItem': '',
'includeMargins': false,
'autoReturn': true,
'returnDelay': 0,
'setOnClick': true,
'homeTop':0,
'homeLeft':0,
'homeWidth':0,
'homeHeight':0,
'returnHome':false,
'autoResize':false,
                'selectClass': 'selectedLava',
'homeClass': 'homeLava',
'skipClass': 'noLava',
'returnStart': function(){},
'returnFinish': function(){},
'hoverStart': function(){},
'hoverFinish': function(){}
}, 
o || {}); // parseInt for easy mathing
function getInt(arg) {
var myint = parseInt(arg);
return (isNaN(myint)? 0: myint);
} if (o.container == '')
o.container = o.target; if (o.autoResize)
$(window).resize(function(){
$(o.target+'.'+o.selectClass).trigger('mouseenter');
}); return this.each(function() {
// ensures parent UL or OL element has some positioning
if ($(this).css('position')=='static')
$(this).css('position','relative'); // create homeLava element if origin dimensions set
if (o.homeTop || o.homeLeft) { 
var $home = $('<'+o.container+' class="'+o.homeClass+'"></'+o.container+'>').css({ 'left':o.homeLeft, 'top':o.homeTop, 'width':o.homeWidth, 'height':o.homeHeight, 'position':'absolute','display':'block' });
$(this).prepend($home);
} var path = location.pathname + location.search + location.hash, $selected, $back, $lt = $(o.target, this).not('.'+o.skipClass), delayTimer, bx=0, by=0, mh=0, mw=0, ml=0, mt=0; // start $selected default with CSS `selectedClass`
$selected = $(o.target + '.' + o.selectClass, this);

// override $selected if startItem is set
if (o.startItem != '')
$selected = $lt.eq(o.startItem); // default to $home element
if ((o.homeTop || o.homeLeft) && $selected.length<1)
$selected = $home; // loop through all the target element a href tags and
// the longest href to match the location path is deemed the most 
// accurate and selected as default
if ($selected.length<1) {
var pathmatch_len=0, $pathel;

$lt.each(function(){ 
var thishref = $('a:first',this).attr('href');
//console.log(thishref+' size:'+thishref.length);
if (path.indexOf(thishref)>-1 && thishref.length > pathmatch_len )
{
$pathel = $(this);
pathmatch_len = thishref.length;
}

});
if (pathmatch_len>0) {
//console.log('found match:'+$('a:first',$pathel).attr('href'));
$selected = $pathel;
}
//else 
//console.log('no match!');
}

// if still no matches, default to the first element
if ( $selected.length<1 )
$selected = $lt.eq(0); // make sure we only have one element as $selected and apply selectedClass
$selected = $($selected.eq(0).addClass(o.selectClass));

// add mouseover event for every sub element
$lt.bind('mouseenter focusin', function() {
//console.log('mouseenter');
// help backLava behave if returnDelay is set
if(delayTimer) {clearTimeout(delayTimer);delayTimer=null;}
move($(this));
}).click(function(e) {
if (o.setOnClick) {
$selected.removeClass(o.selectClass);
$selected = $(this).addClass(o.selectClass);
}
return o.click.apply(this, [e, this]);
});

// creates and adds to the container a backLava element with absolute positioning
$back = $('<'+o.container+' class="backLava"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></'+o.container+'>').css({'position':'absolute','display':'block','margin':0,'padding':0}).prependTo(this); // setting css height and width actually sets the innerHeight and innerWidth, so
// compute border and padding differences on styled backLava element to fit them in also.
if (o.includeMargins) {
mh = getInt($selected.css('marginTop')) + getInt($selected.css('marginBottom'));
mw = getInt($selected.css('marginLeft')) + getInt($selected.css('marginRight'));
}
bx = getInt($back.css('borderLeftWidth'))+getInt($back.css('borderRightWidth'))+getInt($back.css('paddingLeft'))+getInt($back.css('paddingRight'))-mw;
by = getInt($back.css('borderTopWidth'))+getInt($back.css('borderBottomWidth'))+getInt($back.css('paddingTop'))+getInt($back.css('paddingBottom'))-mh; // set the starting position for the lavalamp hover element: .back
if (o.homeTop || o.homeLeft)
$back.css({ 'left':o.homeLeft, 'top':o.homeTop, 'width':o.homeWidth, 'height':o.homeHeight });
else
{
if (!o.includeMargins) {
ml = (getInt($selected.css('marginLeft')));
mt = (getInt($selected.css('marginTop')));
}
$back.css({ 'left': $selected.position().left+ml, 'top': $selected.position().top+mt, 'width': $selected.outerWidth()-bx, 'height': $selected.outerHeight()-by }); 
} // after we leave the container element, move back to default/last clicked element
$(this).bind('mouseleave focusout', function() {
//console.log('mouseleave');
var $returnEl = null;
if (o.returnHome)
$returnEl = $home;
else if (!o.autoReturn)
return true;

if (o.returnDelay) {
if(delayTimer) clearTimeout(delayTimer);
delayTimer = setTimeout(function(){move($returnEl, 'return');},o.returnDelay);
}
else {
move($returnEl, 'return');
}
return true;
}); function move($el, cbType) {

if (cbType == 'return') {
o.returnStart($el);
} else {
o.hoverStart($el);
}

if (!$el) $el = $selected; if (!o.includeMargins) {
ml = (getInt($el.css('marginLeft')));
mt = (getInt($el.css('marginTop')));
}
var flag;
if($(".flag").length>0){
flag=$(".flag").index();
console.log(flag);
}else{
flag=$(".lavaLamp li.selectedLava").index();
console.log(flag);
};

if(($el.index()-$(".lavaLamp li.selectedLava").index())>=0){
if($el.index()>flag){
var dims1 = {
'left': $el.position().left-$el.outerWidth()+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()*2-bx,
'height': $el.outerHeight()-by
};
var dims2 = {
'left': $el.position().left+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()-bx,
'height': $el.outerHeight()-by
};
}else if($el.index()<flag){
var dims1 = {
'left': $el.position().left+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()*2-bx,
'height': $el.outerHeight()-by
};
var dims2 = {
'left': $el.position().left+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()-bx,
'height': $el.outerHeight()-by
};
}
}else{
if($el.index()>flag){
var dims1 = {
'left': $el.position().left-$el.outerWidth()+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()*2-bx,
'height': $el.outerHeight()-by
};
var dims2 = {
'left': $el.position().left+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()-bx,
'height': $el.outerHeight()-by
};
}else if($el.index()<flag){
var dims1 = {
'left': $el.position().left+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()*2-bx,
'height': $el.outerHeight()-by
};
var dims2 = {
'left': $el.position().left+ml,
'top': $el.position().top+mt,
'width': $el.outerWidth()-bx,
'height': $el.outerHeight()-by
};
}
}

$back.stop().animate(dims1, o.speed, o.fx).animate(dims2, o.speed, o.fx, function () {
$(".lavaLamp li").removeClass("flag");
$el.addClass("flag");
if (cbType == 'return') {
o.returnFinish($el);
} else {
o.hoverFinish($el);
}
});
};
});

};
})(jQuery);
修改lavaLamp的移动为1格-2格-1格的滑动。