JQuery：多个缩略图滚动条，无需 JavaScript 重复

Question

我一直在研究缩略图自动滚动脚本。 谁能建议我如何拥有多个版本的滚动条而无需复制 JavaScript。如果我可以使代码通用，但以某种方式指定缩略图滚动条要在其中工作的 DIVS 的 ID（也许在变量中），那就太好了。非常感谢您的帮助！ :)

这里它位于 JSFiddle 上。

JavaScript 如下所示：

$(function() {
    buildThumbs();

    function buildThumbs() {
        $('div.album').each(function() {
            var width = 0;

            var wrapper = $(this).find('.st_thumbs_wrapper');
            wrapper.find('.st_thumbs a').each( function() {
                width += $(this).outerWidth(true);
            });

            var thumbs = $(this).find('.st_thumbs');
            thumbs.css('width', width + 'px');

            makeScrollable(thumbs, wrapper);
        });
    }

    function makeScrollable(thumbs, wrapper) {
        var width = wrapper.innerWidth();

        wrapper.scrollLeft(0);

        var leftBuffer = 200;
        var rightBuffer = 200;

        //When user move mouse over menu
        wrapper.unbind('mousemove').bind('mousemove', function(e) {
            var xPos = e.pageX - wrapper.offset().left - leftBuffer;
            var xMax = wrapper.innerWidth() - rightBuffer;
            if(xPos > 0 && xPos < xMax) {
                var perc = xPos / (xMax - leftBuffer);
                var scrollAmt = thumbs.outerWidth(true) - wrapper.innerWidth();
                wrapper.scrollLeft(perc * scrollAmt);
            }
        });
    }
});

Answer 1

从 CSS 中删除绝对定位。工作正常。

http://jsfiddle.net/kFDMN/

如果你需要定位，那么你需要在一个额外的容器，或者在 jQ 中使用 wrapAll('

') 来动态添加它。