Question

我试图用JQuery放大图像，效果很好（动画本身）但是锚点位于左上角。如何使锚点居中？我已经尝试使用left:50%; transform: translateX(-50%);了。代码如下：

HTML：

    <div id="main-links">
        <a style="cursor:pointer"><img id="img-1" style="margin-left: 0;" src="img/icons/forums.png" /></a>
        <a style="cursor:pointer"><img id="img-2" src="img/icons/servers.png" /></a>
        <a style="cursor:pointer"><img id="img-3" src="img/icons/staff.png" /></a>
        <a style="cursor:pointer"><img id="img-4" src="img/icons/donate.png" /></a>
    </div>

CSS：

#main-links {
    position: absolute;
    width: 873px;
    height: 205px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -90px;
}

#main-links img {
    width: 0;
    height: 0x;
    margin-left: 20px;
}

JavaScript / JQuery：

$(document).ready(function() {
    $('#img-1').delay(700).animate({ height: 200, width: 200 }, 500)
    $('#img-2').delay(1200).animate({ height: 200, width: 200 }, 500)
    $('#img-3').delay(1700).animate({ height: 200, width: 200 }, 500)
    $('#img-4').delay(2200).animate({ height: 200, width: 200 }, 500)
})

Answer 1

如果你想要RWD ...

样品： How to scroll to anchor point in responsive website?

JQuery动画锚点

1 个答案: