Question

我正在使用一个包含这个的jQuery插件：

var $el  = $(this),

$wrapper = $el.find('div.ca-wrapper'),

$items   = $wrapper.children('div.ca-item'),

cache    = {};

// save the with of one item    

cache.itemW      = $items.width();

// save the number of total items

cache.totalItems = $items.length;

我的问题是我需要得到的div的宽度是流动的：它是它的包装的33％。当页面加载时，插件工作得很好，但是当调整窗口大小时，插件会非常难看。

我认为我需要的是再次调整大小，除非你能想到更好的选择。

以下是WIP的链接：http://arielodiz.com.ar/test/（向下滚动到“投资组合”）

这是原始插件：http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

Answer 1

问题是该插件使DIV绝对定位，并且不会自动刷新调整大小的位置。

快速解决方案（虽然不是很好）是在窗口调整大小时再次启动插件：

$(window).resize(function() {
    $('#ca-container').contentcarousel({
        scroll : 2
    });
});

更好的解决方案是在插件本身的init方法中绑定resize事件 - 可能添加一个控制它的选项 - 重新进行计算并在调整窗口大小时重新定位元素。

根据浏览器的不同，resize事件会多次触发或仅在调整大小时触发，因此我使用150ms的超时时间，当鼠标停止移动时会重新计算...

这是在init方法中添加的代码（请参阅正确位置的小提琴）。

var resizeTimer;
// bind the resize event of the window
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        // re-select the items in the order they are now
        var $elements = $wrapper.children('.ca-item');
        // re-calc the width
        cache.itemW = $elements.width();
        // change position accordingly
        $elements.each(function(i) {
            $(this).css({
                left: i * cache.itemW + 'px'
            });
        });
    }, 150);
});

<强> DEMO

jQuery - 在窗口调整大小时重置var / Refresh var

1 个答案: