如何用jquery将相对定位的元素居中?

发布于 2024-12-06 02:57:58 字数 705 浏览 1 评论 0原文

我正在尝试创建一个函数,它返回“左值应该是什么以使当前元素居中”。这允许我将动画设置到中心(和返回)或简单地将项目居中。

不过,我在相对定位部分遇到了麻烦。我错过了什么?

谢谢!


jQuery.fn.centerHorizontalOffset = function () {
    var position = $(this).css("position");
    if (position == "relative"){
        return (($(window).width() - $(this).width()) / 2) - $(this).parent().offset().left;
    } else if (position == "absolute"){
        return ($(window).width() - $(this).width()) / 2;
    }
    return ($(window).width() - $(this).width()) / 2;
}
jQuery.fn.centerHorizontalDistance = function () {
    return $(this).centerHorizontalOffset()-$(this).position().left;
}
$('#myDiv').css('left', $('#myDiv').centerHorizontalDistance());

I am trying to make a function which returns "what the left value should be to center the current element". This allows me to animate to the center (and back) or to simply center an item.

I am having trouble with the relative positioning part though. What did I miss?

Thanks!


jQuery.fn.centerHorizontalOffset = function () {
    var position = $(this).css("position");
    if (position == "relative"){
        return (($(window).width() - $(this).width()) / 2) - $(this).parent().offset().left;
    } else if (position == "absolute"){
        return ($(window).width() - $(this).width()) / 2;
    }
    return ($(window).width() - $(this).width()) / 2;
}
jQuery.fn.centerHorizontalDistance = function () {
    return $(this).centerHorizontalOffset()-$(this).position().left;
}
$('#myDiv').css('left', $('#myDiv').centerHorizontalDistance());

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

茶色山野 2024-12-13 02:57:58

我会考虑使用 jQuery UI 的新“Position”插件: http://jqueryui.com/demos/position/< /a> - 它非常适合做你想做的事。

...我知道这不是对你的问题的直接回答,但这节省了我大量的时间,为什么要重新发明轮子呢? =)。祝你好运!

I would look into using jQuery UI's new "Position" plugin: http://jqueryui.com/demos/position/ - it's great at doing exactly what you're after.

...not a direct answer to your question I know, but this has saved me a ton of time, and why re-invent the wheel? =). Good luck!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文