Question

经过不断的搜索，我希望得到这个想法。基本上我需要一个脚本并在浏览器窗口调整大小时重新启动它。我在JS中只知道足够危险。

该脚本是响应式模板中的非响应式滑块。目前，根据最初加载窗口的分辨率，脚本会改变其输出并进行适当显示。但是，如果你调整窗口大小，脚本会发疯并且看起来很糟糕。

我宁愿能够重写脚本来监听调整大小并重新计算大小，但不幸的是，据我所知，承诺将是压倒性的。我希望通过重新启动脚本来实现类似的结果。

这是在调用幻灯片时：

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_height:         640,
    fit_to_parent:          true,
    auto:                   false,
    interval:               5000,
    continuous:             true,
    loading:                true,
    tooltip_width:          200,
    tooltip_icon_width:     32,
    tooltip_icon_height:    32,
    tooltip_offsetx:        18,
    tooltip_offsety:        0,
    arrows:                 true,
    buttons:                false,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'hslide', /* hslide/vslide/fade */
    transition_speed:       500,
    transition_delay:       300,
    show_caption:           'show', /* onload/onhover/show */
    thumbnails:             true,
    thumbnails_position:    'outside-last', /* outside-last/outside-first/inside-last/inside-first */
    thumbnails_direction:   'horizontal', /* vertical/horizontal */
    thumbnails_slidex:      0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
    dynamic_height:         true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
    speed_change:           false, /* Set to true to prevent users from swithing more then one slide at once. */
    viewline:               true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */

});
});

我也有代码来检测窗口调整大小，等待150毫秒，但我失去了。

var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {

}, 150);
});

Answer 1

更新：我已更新此内容以回复您的评论。好像你的滑块代码一旦运行就会修改原始的html结构，所以你不能再次重新运行代码。下面的解决方案制作原始html的备份副本。在重新运行滑块代码之前，将滑块html恢复为原始状态，然后重新运行代码。

请注意，删除并重新创建滑块时，这可能会导致某种闪烁。如果确保在css中为父元素指定固定高度（幻灯片包装器如下所示），则可以避免这种情况。

创建一个新的隐藏div，您将把备份html放入其中。类似的东西：

<div id="slideshow-backup" style="display:none;"></div>

将现有的showcase div放在包装器中。我们将在重新创建幻灯片html时使用它：

<div id="slideshow-wrapper" style="height: 800px">
    <div id="slideshow">
    ...
    </div>
</div>

您需要创建一个放置幻灯片代码的函数。在文档准备就绪时调用一次，并且在调整窗口大小时设置相同的函数：

function show_slider() {
    $("#showcase").awShowcase({
        content_height: 640
        // deleted the rest of the options for clarity...
    });
}

$(document).ready(function() {
    // make a backup copy of the original showcase div, and change its id to showcase-orig
    $('#showcase').clone().appendTo('#slideshow-backup').attr('id', 'showcase-orig');

    show_slider();

    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            // delete the modified showcase div
            $('#showcase').remove();
            // create a fresh copy of the slideshow from the backup div
            $('#showcase-orig').clone().appendTo('#showcase-wrapper').attr('id', 'showcase')

            // restart the slideshow
            show_slider();            
        }, 150);
    });

});

在浏览器调整大小时重置jQuery脚本

1 个答案: