在jQuery中做水平滚动窗格的最佳方法？

问题描述

| 我想出了以下解决方案。它的效果很好，但是我很好奇是否有更有效的方法来做到这一点。谢谢！ HTML：

<div id=\"magic-pane\" style=\"width: 300px; height: 400px; background: #eee; overflow: hidden\">
    <div id=\"scroller\" style=\"width: 600px; height: 100%; left: 0px; position: relative\">
        <div id=\"pane1\" style=\"width: 300px; height: 100%; background: #efe; float: left\">
            <span id=\"pane1-clicker\">Whee,click me!</span>
        </div>
        <div id=\"pane2\" style=\"width: 300px; height: 100%; background: #fee; float: left\">
            <span id=\"pane2-clicker\">Whoosh! Click me!</span>
        </div>
    </div>
</div>

脚本：

$(document).ready(function() {
    $(\'#pane1-clicker\').click(function() {
        $(\'#scroller\').animate({ left: \'-300px\' },500);
    });
    $(\'#pane2-clicker\').click(function() {
        $(\'#scroller\').animate({ left: \'0\' },500);
    });
});

因此，基本上，魔术窗格是一个300像素宽的小视口。它的内部是一个滚动条，其宽度是原来的两倍，并排包含两个div。相当简单，但又想知道是否有更有效的编码方式。 演示版     

解决方法

当数量最小时，您无需担心任何事情。就像您的情况一样，2非常易于管理。注意：您正在为所有窗格编写单独的

onClick

函数，这会产生问题。 但是随着数字的增长，比如说50，那么您将不得不编写to3ѭ....

$(\"#pane50-clicker)

的不同onClick函数，这是非常低效的。您应该修改脚本，以支持任意数量的窗格，而无需编写额外的代码。 另外，扩展功能，使其可以用作插件。 如果插件可以匹配特定的选择器并分配相关位置（例如

left:300px

），那会更好     ,从您当前的代码来看，我可能要立即更改的唯一一件事就是将两个

click

处理程序中的

$(\'#scroller\')

取出到一个闭包中。这样，处理程序就不必每次单击都选择它。

var $scroller = $(\'#scroller\');
$(\'#pane1-clicker\').click(function() {
    $scroller.animate({ left: \'-300px\' },500);
});
$(\'#pane2-clicker\').click(function() {
    $scroller.animate({ left: \'0\' },500);
});