jquery - CSS relative slide over absolute 悬停

Question

尝试制作一款用户无法在不弄乱屏幕的情况下调整屏幕大小/缩放屏幕的游戏。我正在处理 1 个大背景和上面的动态元素。目前元素没有缩放(它们缩放到浏览器窗口)，这很好，但将它们放在这样的位置已经是一项艰巨的任务。

所以主要目标是，如果用户将鼠标悬停在图像 (div) 上，则 div 应该向上移动 X 像素。但是那些相对图像放在一个绝对框中(对窗口进行left和top css修改)

网上的研究说尝试负边距，但似乎没有用，边距确实是负的，但div只是保持原样。

我的问题的 JSFiddle:http://jsfiddle.net/uyx09byn/2/

解决这个问题的正确方法是什么，这是我当前保持纵横比的 jQuery 代码:

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


$(window).resize(function() 
{
    setSizes();
});

var widthMultiplier;
var heightMultiplier;

var normalWidth = 1920;
var normalHeight = 1080;
var offsets;
function setSizes()
{
    widthMultiplier = ($(window).height()/9*16) / normalWidth;
    heightMultiplier = $(window).height() / normalHeight;

    //Background Image
    $('#stadium').height($(window).height());
    $('#stadium').width($(window).height()/9*16);

    offsets = $('#stadium').offset();

    //playerspace
    $("#players").width(946 * widthMultiplier);
    $("#players").height(130 * heightMultiplier);

    $("#players").css("left", (((1920 * widthMultiplier) * 29.8 / 100) + offsets.left) + "px");
    $("#players").css("top", (((1080 * heightMultiplier) * 77.9 / 100) + offsets.top) + "px");


    //players
    $(".player").width(86 * widthMultiplier);
    $(".player").height(115 * heightMultiplier);
    $(".player").css("margin", (5.5 * heightMultiplier) + "px " + (4 * widthMultiplier) + "px " + (4 * heightMultiplier) + "px " + (4 * widthMultiplier) + "px");

    var lefttemp;
    $(".player").mouseover(function()
    {
        console.log("UP: " + this.id);
        $(this).css({marginTop: '-=15px'});
    });
    $(".player").mouseout(function()
    {
        console.log("DOWN: " + this.id);
        $(this).css({marginTop: '+=15px'});
    });
}   

Answer 1

这是一个更新的 fiddle :https://jsfiddle.net/uyx09byn/17/

你的问题的很大一部分是你试图用 Javascript 完成的很多事情用 CSS 完成得更好。

例如这些行:

$('#stadium').height($(window).height());
$('#stadium').width($(window).height()/9*16);

可以用这个 CSS 替换:

max-width: 1920px;
width: calc(100vh / 9 * 16);
max-height: 1080px;
height: 100vh;

“100vh”是视口(viewport)高度的 100%。

您尝试使用 Javascript 实现的缩放效果最好通过在相关元素上设置 padding-bottom: XX%; 来完成。应根据元素的宽度设置百分比以达到预期的比例。例如，如果您有 2 个元素，每个元素占据其父元素的 50%，如果您希望它们是正方形，则 padding-bottom 集将为 50%。

至于悬停时向上移动 X 像素，您只需要这样做:

.player:hover {
    backface-visibility: hidden;
    transform: translateY(-15px);
    transition: all .3s;
}

transform 将元素移动到所需的方向(在本例中，Y 轴向上 15 个像素)，过渡使变换更平滑，backface-visibility: hidden ;触发转换/转换的硬件加速。