0

我一直在研究缩略图自动滚动脚本。谁能建议我如何在不必复制 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);
            }
        });
    }
});
4

1 回答 1

0

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

http://jsfiddle.net/kFDMN/

如果你需要定位，那么你需要在一个额外的容器上使用它，或者wrapAll('<div>')在你的 jQ 中使用它来动态添加它。

于 2011-04-09T08:34:01.203 回答