javascript - 将图像固定在具有特定坐标、比例的图像上？

Question

我设法在我的网站上放置一个图像，通过将鼠标悬停在特定位置，它会在这些空间的绝对位置附加其他图像。

这是之前的样子:

以下是将鼠标悬停在空格上后的样子:

唯一的问题是，当我以较小的宽度调整窗口大小时，图像不会按照较大宽度的方式放置:

正如您所看到的，图像超出了背景图像。

这是我实现的脚本:

$(function() {
$(".mycinetik-image").find("img").mousemove(function(e) {
  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  var taillePhotoX = $(this).outerWidth();
  var taillePhotoY = $(this).outerHeight();
  var widthImage1 = (taillePhotoX/1.591) - (taillePhotoX/8);
  var widthImage2 = (taillePhotoX/2.683) - (taillePhotoX/8.7);
  var heightImage1 = (taillePhotoY/1.56) - (taillePhotoY/24.84);
  var heightImage2 = (taillePhotoY/1.067) - (taillePhotoY/1.56);
  if((relativeX >= taillePhotoX/7) && (relativeX <= taillePhotoX/1.6) && (relativeY <= taillePhotoY/1.59) && (relativeY >= taillePhotoY/13.1)){
    appendImgMyCinetik (1, taillePhotoX/7.75, taillePhotoY/23, widthImage1, heightImage1);
  } 
  else if((relativeX >= taillePhotoX/7) && (relativeX <= taillePhotoX/2.5) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){
    appendImgMyCinetik (2, taillePhotoX/7.5, taillePhotoY/1.56, widthImage2, heightImage2);
  } 
  else if((relativeX >= taillePhotoX/2.5) && (relativeX <= taillePhotoX/1.6) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){
    appendImgMyCinetik (3, taillePhotoX/2.6, taillePhotoY/1.56, widthImage2, heightImage2);
  } 
  else if((relativeX >= taillePhotoX/1.55) && (relativeX <= taillePhotoX/1.01) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){
    appendImgMyCinetik (4, taillePhotoX/1.586, taillePhotoY/1.56, widthImage2, heightImage2);
  }
  else if((relativeX >= taillePhotoX/1.6) && (relativeX <= taillePhotoX/1.01) && (relativeY <= taillePhotoY/1.59) && (relativeY >= taillePhotoY/13.1)){
    appendImgMyCinetik (5, taillePhotoX/1.586, taillePhotoY/20, widthImage2, heightImage1);
  }
});
});

function appendImgMyCinetik (nb, x, y, imgWidth, imgHeight){
if(nb == 1 && ($("#" + nb).length == 0)){
    var newImg= '<img  id="1" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart1.png">';
    $(".mycinetik-image").append(newImg);
    $("#1").animate({
        opacity:1
    }, 500 );
}else if(nb == 2 && ($("#" + nb).length == 0)){
    var newImg= '<img  id="2" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart2.png">';
    $(".mycinetik-image").append(newImg);
    $("#2").animate({
        opacity:1
    }, 500 );
}else if(nb == 3 && ($("#" + nb).length == 0)){
    var newImg= '<img  id="3" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart3.png">';
    $(".mycinetik-image").append(newImg);
    $("#3").animate({
        opacity:1
    }, 500 );
}else if(nb == 4 && ($("#" + nb).length == 0)){
    var newImg= '<img  id="4" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart4.png">';
    $(".mycinetik-image").append(newImg);
    $("#4").animate({
        opacity:1
    }, 500 );
}else if(nb == 5 && ($("#" + nb).length == 0)){
    var newImg= '<img  id="5" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart5.png">';
    $(".mycinetik-image").append(newImg);
    $("#5").animate({
        opacity:1
    }, 500 );
}
}

我使用比率来使图像大小适应屏幕宽度，但奇怪的是，我的窗口宽度越小，超出的范围就越高。

你有什么想法吗？

Answer 1

仅凭这一点信息很难回答。您提到您使用比率来调整图像大小，但您的函数使用固定大小(以像素为单位)

'width:'+ imgWidth +'px;'

我看到您正在使用以下方式分配宽度值:

var taillePhotoX = $(this).outerWidth();

但这与窗口大小无关。它取决于图像，并且在不同窗口中保持不变。

您可以使用:

var taillePhotoX = $(window).width() // * (times) proportion ratio calculation;

使其相对于浏览器窗口。

此外，如果您的重叠图像数量有限(您的代码仅考虑 5 个)，您可以使用类来定义它们在不同屏幕尺寸(包括过渡)上的显示方式。然后，具有简单地相应地分配适当的类的功能。