Question

我有一个包装器。在那个包装内，我有一个内包装。在那个内包装里面，我有一个跨度。在那个跨度mouseenter上，我想要一个警告来显示该跨度的中间与包装器的右边界之间的距离（主要的一个：#wrapper）。我用position（）尝试了一些东西，但没有达到我刚才提到的目的。

http://jsfiddle.net/ZP7Lt/

我的HTML：

<div id="wrapper">
    <div id="inner-wrapper">
        <span id="me">It's me</span>
    </div>
</div>

我的css：

#wrapper{
    width:400px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    background-color:yellow;}

#inner-wrapper{
    position:absolute;            
    width:100px;
    margin-left:100px;
    margin-top:50px;
    background-color:blue;}

#me{
    background-color:pink;}

我的js：

$('#me').mouseenter(function(){


    alert("distance from middle of span till right border of #wrapper???");

})

Answer 1

$('#me').mouseenter(function(){
    var $wrapper = $("#wrapper"), $this = $(this);
    alert("distance from middle of span till right border of #wrapper is " + ($wrapper.width() - ($this.offset().left - $wrapper.offset().left + $this.width()/2)));
});

工作演示 - http://jsfiddle.net/ShankarSangoli/NxhWk/

Answer 2

试试这个，我希望有所帮助

var spanLeft = $("#me").offset().left;
var wrapper = $("#wrapper").offset().left;                 
alert("distance from middle of span till right border of #wrapper???");
alert(spanLeft - wrapper);

Answer 3

您可以使用offset()和width()

的组合

$('#me').mouseenter(function(){
    var middle = $(this).offset().left + $(this).width()/2;
    var wrapperRight = $("#wrapper").offset().left+$("#wrapper").width();

    alert( wrapperRight - middle);

})

修改修正了数学错误

Demo

警告显示元素之间的距离

3 个答案: