Question

我想出了下面的解决方案。它工作得很好，但我很想知道是否有更有效的方法。谢谢！

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);
    });
});

所以基本上，魔术窗格是一个300px宽的小视口。里面是一个两倍宽的滚动条，并排包含两个div。非常简单，但又一次，只是想知道是否有更有效的编码方式。

Demo

Answer 1

当数量最小时，您无需担心任何事情。就像在你的情况下，2是非常易于管理的。注意：您正在为所有窗格编写单独的onClick函数，这将产生问题。

但是随着数字增长，让我们说50，那么你将不得不编写$('#pane1-clicker') .... $("#pane50-clicker)的不同onClick函数，这是非常低效的。您应该修改脚本，以支持任意数量的窗格，而无需编写额外的代码。

此外，扩展该功能，以便它可以用作插件。
如果插件可以匹配特定选择器并指定相关位置，例如left:300px

Answer 2

从您当前的代码中，我唯一可能立即改变的就是从两个$('#scroller')处理程序中取出click到一个闭包中。这样，处理程序不必每次发生点击就选择它。

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

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

2 个答案: