javascript - 如何通过jquery将div翻译到特定位置

Question

我想通过 Jquery 翻译 div x 和 y 位置。它适用于所有浏览器，如 IE 7、IE8、IE9 和 IE10 我试过如下

<div id="s1" style="-ms-transform:translate(159,430)">
            hello
        </div>

但不再工作了。如何将 div 转换为可在IE7 和 IE8 和 IE9 浏览器中使用的页面中特定的 x 和 y 位置。

该解决方案适用于从 IE7 到 IE10 的各种 IE 版本。

谢谢，

湿婆

Answer 1

因为 IE7 和 IE8 不支持转换，所以你可以用这个来代替：

$("#s1").css("position", "relative").animate({ left: 159, top: 430 });

Answer 2

-ms-transform 特定于 IE 浏览器。您需要添加其他浏览器特定的属性。

style="-ms-transform:translate(159,430); transform:translate(159,430); -webkit-transform:translate(159,430);"

Answer 3

您可以制作div绝对定位，并将其动画到您想要的位置：

$("#s1").css("position", "absolute").animate({
    left: 159,
    top:  430
});

在第一位（对 的调用css）中，您可能想要指定起始位置。

实例| 直播源

Answer 4

使用 px 等单位。

<style> 
.tt {
    width: 234px;
    height: 123px;
    background-color: #ABCDEF;
    transform:translate(159px,430px);
    -ms-transform:translate(159px,430px); /* IE 9 */
    -webkit-transform:translate(159px,430px); /* Safari and Chrome */
}
</style>
<div id="s1" class="tt">
    hello - use units like px
</div>