Question

我正在设置一个包含一定数量列的图库，每列中都会包含不同数量的元素。逻辑是您将窗口宽度和高度悬停在周围，并且能够相对于高度和宽度查看包含div。我已经设法获得元素的动态宽度并成功地操纵div，因此每个列都是可见的 - 正如你在小提琴中可以看到https://jsfiddle.net/x66zqwaa/（jquery在下面）。我不能理解的是，横向我能够成功地查看每个元素 - 但是垂直地，一些div被切断，并且它的行为方式与水平方式不同。如果有人能帮助我，我将非常感激！

$(document).ready(function() {

var winW = $(window).width(),
  winH = $(window).height(),
  winWHalf = winW / 2,
  winHHalf = winH / 2,
  $cont = $(".content"),
  contW = $cont.width(),
  contH = $cont.height(),
  diffX = (winW - contW) /2,
  diffY = (winH - contH) /2;

var finalX = 0,
    finalY = 0;

var moveContent = function(e) {

var x = e.pageX,
    y = e.pageY;

finalX = ((x) * (contW / winW) / 2);
finalY = ((y) * (contH / winH) / 2);

console.log(finalX, finalY);
  $cont.css("transform", "translate3D(" + (0 - finalX) + "px, " + (0 - finalY) + "px, 0)");

}; $(document).ready(function() {

var winW = $(window).width(),
  winH = $(window).height(),
  winWHalf = winW / 2,
  winHHalf = winH / 2,
  $cont = $(".content"),
  contW = $cont.width(),
  contH = $cont.height(),
  diffX = (winW - contW) /2,
  diffY = (winH - contH) /2;

var finalX = 0,
    finalY = 0;

var moveContent = function(e) {

var x = e.pageX,
    y = e.pageY;

finalX = ((x) * (contW / winW) / 2);
finalY = ((y) * (contH / winH) / 2);

console.log(finalX, finalY);
  $cont.css("transform", "translate3D(" + (0 - finalX) + "px, " + (0 - finalY) + "px, 0)");

};

道歉，但由于某种原因，我无法发布代码的完整性。请看小提琴。

Answer 1

您正在根据width计算height和$(".content")。您需要使用$(window)或$(document)代替。对于height，您可能希望使用更大的值，以确保填满屏幕。

计算div的高度和宽度，并将其与窗口高度和宽度相关联

1 个答案: