jquery实现菜单光标上下左右滑动原理：
1、左右滑动主要是左边距离left的定位增减，查看nav()方法jquery代码
2、上下滑动主要是上边距离top的定位增减，查看sideSlider()方法jquery代码
左右菜单的html代码如下：
<div class="nav-box">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">扩展</a></li>
<li><a href="#">皮肤</a></li>
<li class="cur"><a href="#">帮助</a></li>
</ul>
<div class="nav-line"></div>
</div>
光标移动
<div class="nav-line"></div>
上下菜单的html代码如下：
<div class="help-side fl">
<dl>
<dt>7.1版本变化</dt>
<dd class="cur"><a href="#">7.1版本有哪些改进</a></dd>
<dd><a href="#">广告拦截怎么设置</a></dd>
</dl>
<dl>
<div class="side-slider"></div>
</div>
光标移动
<div class="side-slider"></div>
jquery插件代码如下：
(function ($) {
$(function () {
nav();
sideSlider();
});
function nav() {
var $liCur = $(".nav-box>ul>li.cur"),
curP = $liCur.position().left,
curW = $liCur.outerWidth(true),
$slider = $(".nav-line"),
$targetEle = $(".nav-box>ul>li:not('.last')"),
$navBox = $(".nav-box");
$slider.stop(true, true).animate({
"left" : curP,
"width" : curW
});
$targetEle.mouseenter(function () {
var $_parent = $(this);//.parent(),
_width = $_parent.outerWidth(true),
posL = $_parent.position().left;
$slider.stop(true, true).animate({
"left" : posL,
"width" : _width
}, "fast");
});
$navBox.mouseleave(function (cur, wid) {
cur = curP;
wid = curW;
$slider.stop(true, true).animate({
"left" : cur,
"width" : wid
}, "fast");
});
};
function sideSlider() {
if (!$(".help-side dl").length) {
return false;
}
var $aCur = $(".help-side dl").find(".cur a"),
$targetA = $(".help-side dl dd a"),
$sideSilder = $(".side-slider"),
curT = $aCur.position().top+1;
$sideSilder.stop(true, true).animate({
"top" : curT
});
$targetA.mouseenter(function () {
var posT = $(this).position().top+1;
$sideSilder.stop(true, true).animate({
"top" : posT
}, 240);
}).parents(".help-side").mouseleave(function (_curT) {
_curT = curT
$sideSilder.stop(true, true).animate({
"top" : _curT
});
});
};
})(jQuery);
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery jquery插件 jquery菜单 jquery特效