Question

我正在尝试在我的网站上安装此 jQuery Smooth Div Scroll 插件，但我无法让它工作。我的目标是获得一个水平的链接列表，当悬停时（根据光标位置）滚动到左侧或右侧。

我在HTML中添加了以下文件：

<script src="js/jquery.smoothdivscroll-1.3-min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/jquery.min.js"

我还在结束/正文标记之前添加了这个：

<script type="text/javascript">
$(document).ready(function () {
    $("#makeMeScrollable").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });
});
</script>

我有这组链接：

<div class="topics_panel">
    <div class="table" id="makeMeScrollable">
        <a href="/index.php?q=News&search=search" class="topic" id="news">News</a>
        <a href="/index.php?q=Cars&search=search" class="topic" id="cars">Cars</a>
        <a href="/index.php?q=Food&search=search" class="topic" id="food">Food</a>
        <a href="/index.php?q=Sports&search=search" class="topic" id="sports">Sports</a>
        <a href="/index.php?q=Travel&search=search" class="topic" id="travel">Travel</a>
        <a href="/index.php?q=Technology&search=search" class="topic" id="tech">Technology</a>
        <a href="/index.php?q=Arts&search=search" class="topic" id="arts">Arts</a>
        <a href="/index.php?q=Architecture&search=search" class="topic" id="architecture">Architecture</a>
        <a href="/index.php?q=Entertainment&search=search" class="topic" id="entertainment">Entertainment</a>
        <a href="/index.php?q=Music&search=search" class="topic" id="music">Music</a>
        <a href="/index.php?q=Money&search=search" class="topic" id="money">Money</a>
    </div>
</div>

我正试图让这组链接成为我上面提到的滚动水平列表。但是，当我尝试预览时，我得到的是纯粹的水平列表，没有任何动画，因此jQuery部分显然不起作用。

我还将此添加到我的CSS中：

#makeMeScrollable div.scrollableArea *
{
    position: relative;
    display: block
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
        block of code. It's just a nice feature that prevent the images from
        accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

当我预览我的代码时，这就是我得到的：

http://i.stack.imgur.com/rqcfo.png

有人能看出我做错了什么吗？我非常感谢你的帮助。

如何安装jQuery插件？

0 个答案: