0

我正在使用 jScrollPane 实现水平图像滑块，并尝试使用 Horizo​​ntalDragMinWidth 设置为拖动句柄 (.jspDrag) 设置最小宽度63。

不幸的是，它只是不起作用，我不知道为什么。我真的很感激一些帮助。

该问题可在http://tmcdomains.com/jScrollPane/static.html查看。

以下脚本在我的页脚中，就在标签上方：

<script type="text/javascript">
$(function () {
$("img").wrap('<div class="item" />');
var $conveyor = $("#conveyor");
var $item = $(".item", $conveyor);
var $viewer = $("#viewer");
var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

var imagesWidth = 0;
$($item).each(function (index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($item.css("margin-right"), 10);
});
$($conveyor).width(imagesWidth);

function scrollByItem(direction) {
    var xPos = api.getContentPositionX();
    var viewerHalfWidth = $viewer.width() / 2;
    var pixels = 0;
    $($item).each(function (i) {
        pixels += $(this).outerWidth(true);
        if (pixels >= (xPos + viewerHalfWidth)) {
            if (direction == "right" && $item[i + 1]) {
                api.scrollToX(($($item[i + 1]).outerWidth(true) / 2) + pixels - viewerHalfWidth, true);
            } else {
                if (direction == "left" && $item[i - 1]) {
                    api.scrollToX(pixels - $(this).outerWidth(true) - viewerHalfWidth - ($($item[i - 1]).outerWidth(true) / 2), true);
                }
            }
            return false;
        }
    });
    return false;
}
$("#prev").click(function () {
    scrollByItem("left");
});
$("#next").click(function () {
    scrollByItem("right");
});

$viewer.each(
    function()
    {
        $(this).jScrollPane();
        var api = $(this).data('jsp');
        var throttleTimeout;
        $(window).bind(
            'resize',
            function()
            {
                if ($.browser.msie) {
                    // IE fires multiple resize events while you are dragging the browser window which
                    // causes it to crash if you try to update the scrollpane on every one. So we need
                    // to throttle it to fire a maximum of once every 50 milliseconds...
                    if (!throttleTimeout) {
                        throttleTimeout = setTimeout(
                            function()
                            {
                                api.reinitialise();
                                throttleTimeout = null;
                            },
                            50
                        );
                    }
                } else {
                    api.reinitialise();
                }
            }
        );
    }
);    

});
</script>
4

1 回答 1

1

我不太明白你为什么要初始化 jScrollPane 两次：

第一次：

var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

第二次：

$(this).jScrollPane();

但是在我调试之后。jScrollPane 确实被初始化了两次（jScrollPane.js 的第 448 行到第 453 行运行了两次）。第二次初始化时，horizontalDragMinWidth设置中没有指定no，所以horizo​​ntalDragMinWidth默认为0。我的直觉是这就是问题所在。

于 2012-01-17T23:55:33.990 回答