重置瀏覽器上的jQuery腳本調整大小

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. */ 

}); 
}); 

我也有在地方檢測的窗口大小調整，等待150ms的代碼，但後來我迷路了。

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> 

• 將您現有的展示DIV的包裝內。

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

• 您需要創建在其中放幻燈片的代碼功能：當我們重新創建幻燈片HTML我們將使用這一點。你怎麼稱呼它，一旦當文件已準備就緒，並設置相同的功能，每當窗口大小被稱爲：

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); 
    }); 

});​