jquery 实现 导航标签 滑动

[Dene-wang]

需求：网站左边导航栏点击菜单后，在网站上方显示点击后的菜单导航标签，以此类推，当用户点击了很多不同的菜单后，导航标签（ul）已经超出div了，然后左右有两个按钮，点击左边的按钮，导航状态向左移动，超出的部分未显示的情况下，才可以移动。右边的按钮一样的，向右移动。
我用了 jquery的animate 可以移动，但是 没有终点和起点概念，可以一直移动。

看下面的图片（网站的上方导航标签。由左边菜单点击后显示）就懂了。

[当作看不见]

jquery 移动前，先加一个判断 ，判断一下位置 ，再移动，如果已经显示第一个了，都不能再向左移了。一般这种都是相对定位的，起始位置 就是left : 0px; 动画的左右移动就是+= n px 的样子 ，如果左移的时候 left=0px ;那就不移动嘛 ,右移的时候left =N px ,也一样不移动。 逻辑就是这样的，加一个判断就好

[Dene-wang]

shortcutMenuLeft = function () {
    var _this = $("#shortcutMenu ul")[0];
    if (_this.offsetWidth < _this.scrollWidth && _thisLeft != "0px") {
        $("#shortcutMenu ul").animate({}, "fast", function () {
            $(this).find("li:eq(0)").before($(this).find("li:last"));
            //$(this).css({ "left": "0px" });
        });
    }
}
shortcutMenuRight = function () {
    var _this = $("#shortcutMenu ul")[0];
    if (_this.offsetWidth < _this.scrollWidth) {
        $("#shortcutMenu ul").animate({}, "fast", function () {
            //$(this).find("li:eq(0)").appendTo($(this));
            $(this).find("li:last").after($(this).find("li:eq(0)"));
            //$(this).css({ "right": "230px" });
        });
    }
}

算了，不停止了，就直接让他随意滚动，没有开始结尾。

[Dene-wang]

引用 楼主 DeneImp 的回复:

需求：网站左边导航栏点击菜单后，在网站上方显示点击后的菜单导航标签，以此类推，当用户点击了很多不同的菜单后，导航标签（ul）已经超出div了，然后左右有两个按钮，点击左边的按钮，导航状态向左移动，超出的部分未显示的情况下，才可以移动。右边的按钮一样的，向右移动。
我用了 jquery的animate 可以移动，但是 没有终点和起点概念，可以一直移动。

看下面的图片（网站的上方导航标签。由左边菜单点击后显示）就懂了。

这个问题，可以告诉我么？（如下图）


在这个菜单导航上加了右键菜单，然后 点击任何别处，除了右键菜单本身之外，就隐藏该右键菜单。

//...省略代码，右键菜单显示时，绑定body鼠标事件。
$("body").bind("mousedown", onBodyMouseDown);
function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        $("#rMenu").css({ "visibility": "hidden" });
    }
}

[Dene-wang]

引用 1 楼 qq_29594393 的回复:

jquery 移动前，先加一个判断 ，判断一下位置 ，再移动，如果已经显示第一个了，都不能再向左移了。一般这种都是相对定位的，起始位置 就是left : 0px; 动画的左右移动就是+= n px 的样子 ，如果左移的时候 left=0px ;那就不移动嘛 ,右移的时候left =N px ,也一样不移动。

逻辑就是这样的，加一个判断就好

这个问题，可以告诉我么？（如下图）

//在这个菜单导航上加了右键菜单，然后  点击任何别处，除了右键菜单本身之外，就隐藏该右键菜单。
//...省略代码，右键菜单显示时，绑定body鼠标事件。
$("body").bind("mousedown", onBodyMouseDown);
function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        $("#rMenu").css({ "visibility": "hidden" });
    }
}