2

我正在使幻灯片具有响应性。我正在使用简单的 jQuery 来实现这一点。我的逻辑是：

如果窗口宽度 < 620，则通过 jQuery 在 CSS 中进行更改。
否则
设置默认（固定）css

top:470px当窗口大小正常时，我有一个固定 css 的元素。如果窗口的大小低于 620，我已将其更改为相对于图像大小（在窗口大小调整时会发生变化）。这是我的代码：

function resizeVideo() {
  var width = $(window).width();
  if(width < 620) {
    $('#controls').css('top', $('img').height());
  }
  else {
    $('#controls').css('top', '470');
  }
}
$(window).resize(resizeVideo);

这样，当尺寸小于 620 时，控件会粘在图像的底部。现在阻止我的一些问题是：

  1. 每当我将窗口从小于 620 的大小最大化时，图像都会缩小到其原始大小，但#controls元素保持与最大化之前相同的高度。

  2. 当我将窗口大小调整为大于 620 的大小#controls时345px，实际上图像的高度也会更大。

  3. 每当幻灯片中的图像更改并且我当时调整窗口大小时，#controls都会出现在所有内容的顶部，即它根本不应用该top:属性。

我已经在一个问题中询问了所有这些问题，因为它们都是关于#controls元素的，我相信修复一个会自动修复其他问题。任何指针将不胜感激！

4

2 回答 2

2

通过 jQuery 操作 css 时，您需要 'px' 后缀。

function resizeVideo() {
  var width = $(window).width();
  if(width < 620) {
    $('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
  } else {
    $('#controls').css('top', '470px');
  }
}
$(window).resize(resizeVideo);
于 2013-04-25T10:33:51.313 回答
1

认为您必须在 .resize() 中包装一个闭包函数，例如$(window).resize(function(){ resizeVideo(); });。

也因为函数 resizeVideo 不是参考，你必须用它来调用它()

对于 jquery .css() 函数，他们制作了一些 css 钩子，您可以在没有字符串的情况下使用，因此应用 css 它将是： $('#controls').css({top: 470 + "px"});

于 2013-04-25T10:33:03.740 回答