Question

JQuery的：

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
    updateContainer();
    });
});

function updateContainer() {
    var w = $(window).innerWidth();
    var img_head = $("#img_tag");
    var image_w = img_head.css("padding") + img_head.width();
    var cont = $("#image_container");
    if (w > 6*image_w) {
          var margin = (w - 6*image_w)/2;
          return cont.css('margin-left', margin + "px"); 
    } else if (w > 5*image_w) {
          var margin = (w - 5*image_w)/2;
          return cont.css('margin-left', margin + "px"); 
    } else if (w > 4*image_w) {
          var margin = (w - 4*image_w)/2;
          return cont.css('margin-left', margin + "px");    
    } else if (w > 3*image_w) {
          var margin = (w - 3*image_w)/2; 
          return cont.css('margin-left', margin + "px");    
    } else {
          var margin = (w - 2*image_w)/2; 
          return cont.css('margin-left', margin + "px"); 
    }
});

相关HTML

<div id="images">
<div id="image_container">
<img id="img_tag" src="image source etc.">
... 18 other images ... 
</div>
</div>

为了提供更多的上下文，我在图像容器中有一个图像列表（所有图像具有相同的尺寸和相同的id，img_tag），我试图在调整窗口大小时更改容器的左边距。目前这根本不起作用。我对Jquery很新，我不确定问题是什么。谢谢！

Answer 1

你可以复制粘贴它：

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        console.log('updating');
        updateContainer();
    });
});

function updateContainer() {
    var w = $(window).innerWidth();
    var img_head = $("#img_tag");
    var image_w = img_head.css("padding") + img_head.width();
    var cont = $("#image_container");
    if (w > 6*image_w) {
          var margin = (w - 6*image_w)/2;
          return cont.css('margin-left', margin + "px"); 
    } else if (w > 5*image_w) {
          var margin = (w - 5*image_w)/2;
          return cont.css('margin-left', margin + "px"); 
    } else if (w > 4*image_w) {
          var margin = (w - 4*image_w)/2;
          return cont.css('margin-left', margin + "px");    
    } else if (w > 3*image_w) {
          var margin = (w - 3*image_w)/2; 
          return cont.css('margin-left', margin + "px");    
    } else {
          var margin = (w - 2*image_w)/2; 
          return cont.css('margin-left', margin + "px"); 
    }
};

您仍然遇到语法错误。这个正在运行。每当触发更改时，您都会在JS控制台日志中看到。在这里演示：http://jsfiddle.net/ddan/4mxx513o/

JQuery：在窗口大小调整时更改容器边距

1 个答案: