淘宝广告主后台导航jQuery插件
淘宝广告主后台导航效果，用jQuery写的插件
配置说明
fx：动画效果，默认linear，还可以设置为easein，easeout等。。具体看代码里面扩展的jQuery.easing
speed：动画时间，默认500ms
click：点击导航后的回调函数，默认空函数
源代码如下
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>淘宝广告主后台导航jQuery插件</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
window.onload=function () {
jQuery.extend(jQuery.easing , { easein: function (x, t, b, c, d) { return c * (t /= d) * t + b }, easeinout: function (x, t, b, c, d) { if (t < d / 2) return 2 * c * t * t / (d * d) + b; var a = t - d / 2; return -2 * c * a * a / (d * d) + 2 * c * a / d + c / 2 + b }, easeout: function (x, t, b, c, d) { return -c * t * t / (d * d) + 2 * c * t / d + b }, expoin: function (x, t, b, c, d) { var a = 1; if (c < 0) { a *= -1; c *= -1 } return a * (Math.exp(Math.log(c) / d * t)) + b }, expoout: function (x, t, b, c, d) { var a = 1; if (c < 0) { a *= -1; c *= -1 } return a * (-Math.exp(-Math.log(c) / d * (t - d)) + c + 1) + b }, expoinout: function (x, t, b, c, d) { var a = 1; if (c < 0) { a *= -1; c *= -1 } if (t < d / 2) return a * (Math.exp(Math.log(c / 2) / (d / 2) * t)) + b; return a * (-Math.exp(-2 * Math.log(c / 2) / d * (t - d)) + c + 1) + b }, bouncein: function (x, t, b, c, d) { return c - jQuery.easing['bounceout'](x, d - t, 0, c, d) + b }, bounceout: function (x, t, b, c, d) { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b } }, bounceinout: function (x, t, b, c, d) { if (t < d / 2) return jQuery.easing['bouncein'](x, t * 2, 0, c, d) * .5 + b; return jQuery.easing['bounceout'](x, t * 2 - d, 0, c, d) * .5 + c * .5 + b }, elasin: function (x, t, b, c, d) { var s = 1.70158; var p = 0; var a = c; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a); return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b }, elasout: function (x, t, b, c, d) { var s = 1.70158; var p = 0; var a = c; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a); return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b }, elasinout: function (x, t, b, c, d) { var s = 1.70158; var p = 0; var a = c; if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5); if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a); if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b }, backin: function (x, t, b, c, d) { var s = 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b }, backout: function (x, t, b, c, d) { var s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b }, backinout: function (x, t, b, c, d) { var s = 1.70158; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b }, linear: function (x, t, b, c, d) { return c * t / d + b } });
(function ($) {
$.fn.lavaLamp = function (o) {
o = $.extend({fx: "linear",speed: 500,click: function () { }},o || {});
return this.each(function () {
var b = $(this),noop = function () { },$back = $('<li class="back"><div class="left"></div></li>').appendTo(b),$li = $("li", this),curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function () {move(this)},noop);
$(this).hover(noop,function () {move(curr)});
$li.click(function (e) {setCurr(this);return o.click.apply(this, [e, this])});
setCurr(curr);
function setCurr(a) {$li.removeClass('current');$(a).addClass('current');$back.css({"left": a.offsetLeft + "px", "width": a.offsetWidth + "px"});curr = a};
function move(a) {$back.each(function () {$.dequeue(this, "fx")}).animate({width: a.offsetWidth,left: a.offsetLeft},o.speed, o.fx)}
})
}
})(jQuery);
if ($("#guider").size()>0)$("#guider").lavaLamp({fx: "backout",speed: 700,click: function (event, menuItem) {return false;}});
};
</script>
<style type="text/css">
.lavaLamp {float: right;padding-right: 10px;padding-top: 12px;position: relative;zoom:1;overflow:hidden}
.lavaLamp LI A:hover {border-color: -moz-use-text-color;border-style: none;border-width: medium;color: #00B5F7;}
.lavaLamp LI A:active {border-color: -moz-use-text-color;border-style: none;border-width: medium;color: #00B5F7;}
.lavaLamp .sep {border-top: medium none;color: #AEADAD;float: left;font-size: 10px;height: 20px;padding-top: 13px;}
.lavaLamp .current {color: #008ACE;}
.lavaLamp .current A {color: #008ACE;}
.lavaLamp LI {float: left;list-style-image: none;list-style-type: none;padding-bottom: 11px;}
.lavaLamp LI.back {height: 40px;position: absolute;width: 120px;z-index: 8;padding-bottom: 0px;}
.lavaLamp LI.back .left{height:3px;line-height:30px;width:100%;overflow:hidden;background:#00a7f2;position:absolute;left:0px;bottom:3px;}
.lavaLamp LI A {color: #303030;display: block;float: left;font: 13px "Microsoft Yahei",Arial,Helvetica,sans-serif;height: 28px;letter-spacing: 0;outline-style: none;outline-width: medium;overflow: hidden;padding: 5px 20px 0 17px;position: relative;text-align: center;text-decoration: none;text-transform: uppercase;top: 6px;z-index: 10;}
</style>
</head>
<body>
<ul id="guider" class="lavaLamp">
<li><a title=子栏目 href="#">子栏目</a></li>
<span class="sep">|</span>
<li><a title=子栏目 href="#">子栏目</a></li>
<span class="sep">|</span>
<li><a title=子栏目 href="#">子栏目</a></li>
<span class="sep">|</span>
<li><a title=子栏目 href="#">子栏目</a></li></ul>
</body></html>
jquery框架下载：jquery-1.4.2.min.js下载
加支付宝好友偷能量挖...
原创文章，转载请注明出处：淘宝广告主后台导航jQuery插件