Question

我正在使用jQuery和Foundation框架。它内置于Wordpress主题中，这就是为什么我必须使用"jQuery"而不是简短的$表示。

jQuery在加载页面时调整幻灯片的大小。但是，如果我调整浏览器窗口大小，它将不会调整大小。我已经尝试了很多东西，但无法让它发挥作用。 （边框，单独的功能，不同的语法）。

jQuery( document ).ready(function($) {
    var width = jQuery(window).width(),
        height = jQuery(window).height() - jQuery('.top-bar').height();
    jQuery('.slide').height(height).width(width);
    jQuery('.slide4 > div > img').height(height*.5);

    jQuery(window).resize(function() {
        jQuery('.slide').height(height).width(width);
        jQuery('.slide4 > div > img').height(height*.5);
    });
});

Answer 1

您可以将代码放在resize事件中，并在页面加载时触发它。您也可以使用IIF在代码中使用$。你一定要试着调整大小，但现在这很酷！

// We can use $ inside here...
(function($){

  // When the document is ready this is called...
  $(function(){

    // We'll be using thise more than once!
    var $window = $(window);

    // Whenever a resize event occurs, do this...
    $window.on('resize', function(e){

      var width = $window.width(), 
          height = $window.height() - $('.top-bar').height();

      $('.slide').height(height).width(width);
      $('.slide4 > div > img').height(height*.5);

    // The "trigger" fakes the event on load...
    }).trigger('resize');


  })

})(jQuery); // You're passing jQuery to the IIF, so this is why you can use $ inside.

希望这有帮助！

没有使用jQuery resize（）调整大小

1 个答案: