Question

我正在尝试创建一个包含不同类别的滑动水平菜单。

我想使用一个具有固定宽度值的div图层，而另一个div在第一个div中具有更宽的宽度。这样，只有第二个div的一部分可见。

我遇到两个问题：

categorylist html代码工作不正常，而是看到第二个div的一部分，我看到所有回车。
当用户将鼠标放在＆lt;＆gt;上时，我正试图将第二个div移动到右边和左边。在类别清单的两侧都有标志。

你能帮我一把，这是我的代码：

<div style="overflow: hidden;width: 710px;height: 17px;">
       <div id="CategoryList">
          <span id="NavigateBackward"><</span>
             <p class="MiniCategory" style="display: inline;">Category 1</p>
             <p class="MiniCategory" style="display: inline;">Category 2</p>
             <p class="MiniCategory" style="display: inline;">Category 3</p>
             <p class="MiniCategory" style="display: inline;">Category 4</p>
             <p class="MiniCategory" style="display: inline;">Category 5</p>
             <p class="MiniCategory" style="display: inline;">Category 6</p>
             <p class="MiniCategory" style="display: inline;">Category 7</p>
             <p class="MiniCategory" style="display: inline;">Category 8</p>
             <p class="MiniCategory" style="display: inline;">Category 9</p>
             <p class="MiniCategory" style="display: inline;">Category 10</p>
             <p class="MiniCategory" style="display: inline;">Category 11</p>
             <p class="MiniCategory" style="display: inline;">Category 12</p>
             <p class="MiniCategory" style="display: inline;">Category 13</p>
             <p class="MiniCategory" style="display: inline;">Category 14</p>
             <span id="NavigateFordward">></span>
       </div>
    </div>


     <script language="javascript" type="text/javascript">
                        $(document).ready
                        (
                            Initialize()
                        );

                        function Initialize()
                        {
                            InitList();

                        }
                        function InitList()
                        {
                            $("#NavigateBackward").hover
                            (
                                function()
                                {
                                    $("#CategoryList").animate({ "left": "-=50px" }, 1500);      
                                }
                            );
                            $("#NavigateFordward").hover
                            (
                                function() 
                                {
                                    $("#CategoryList").animate({ "right": "+=50px" }, 1500); 
                                }
                            );
                        }
    </script>

提前感谢您的帮助。亲切的问候。约翰。

Answer 1

在这种情况下，您可以使用jQuery Scrollable。 Is this你想要什么？

Answer 2

或者自己动手

$(document).ready (Initialize);

function Initialize(){
    InitList();
}

var moveLeft = false;
var moveRight = false;

var left = function() {
    if (moveLeft)
        $("div#CategoryList").animate({ "marginLeft": "-=5px" }, 150, 'linear', left);
};

var right = function() {
    if(moveRight)
        $("div#CategoryList").animate({ "marginLeft": "+=5px" }, 150, 'linear', right);
};

function InitList() {
    $("span#NavigateBackward").hover(
        function() { moveLeft=true; left(); },
        function() { moveLeft=false; }
    );
    $("span#NavigateFordward").hover(
        function() { moveRight=true; right(); },
        function() { moveRight=false; }
    );
}

你的标记有一些缺陷，因为“向前”“向后”句柄在div#CategoryList内，这意味着当向左/向右滚动时，句柄本身会消失（你应该将它们移到div#CategoryList之外

类别列表的Jquery水平滑块

2 个答案: