Question

我正在制作幻灯片响应的过程。我使用简单的jQuery来实现这一点。我的逻辑是：

如果窗口宽度<1。 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时，控件会粘在图像的底部。现在阻止我的一些问题是：

每当我从小于620的大小最大化窗口时，图像缩放回原始大小，但#controls元素保持与最大化之前相同的高度。
当我将窗口大小调整为大于620的大小时，#controls在345px左右停留在实际位置时，图像的高度也会更高。
每当幻灯片中的图像发生变化并且我当时调整窗口大小时，#controls就会出现在所有内容的顶部，即它根本不会应用top:属性

我已经在单个问题上询问了所有这些查询，因为它们都是关于#controls元素的，我相信修复一个会自动修复其他问题。任何指针都将受到高度赞赏！

Answer 1

在通过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);

Answer 2

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

另外，因为函数resizeVideo不是引用，您必须使用()

调用它

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

通过jQuery的CSS没有应用

2 个答案: