使用jQuery动态定位元素

我正在工作om菜单栏，每个菜单栏项都是图像，当用户将鼠标放在菜单项上时，将出现带子菜单的div。使用jQuery动态定位元素

我想直接在适当的图像项目下放置div（没有空格，div将悬停在所有元素之上），右侧对齐，意味着div的右上角应该位于图像的右下角。

因为我不能也不想硬编码div的位置，所以我想动态地执行它。

现在我有这样的：

$('img').each(function(){      
    jQuery(this).mouseenter(function(){ 
    var menuItem = $('#' + this.id + '_menu'); //get the needed div 
    var imgRight = this.offset() + this.width(); 


    }); 
});

来源

2010-07-04 ilann

你的问题是什么？你必须使用'$（this）.offset（）'和'$（this）.width（）'。 – 2010-07-04 14:45:19

我问是否还有别的东西可以使用 – ilann 2010-07-04 14:45:59

的offset()方法top和left性能，你需要使用它们，例如：

var imgRight = this.offset().left + this.width(); 
var imgTop = this.offset().top + this.height();

之后，你将不得不放弃了absolute定位到DIV将它们放置在图像下方：

menuItem.css({ 
    position:'absolute', 
    top: imgTop, 
    left: imgLeft, 
    zIndex:5000 
});

所以，你的代码就变成了：

$('img').each(function(){      
    jQuery(this).mouseenter(function(){ 

    var menuItem = $('#' + this.id + '_menu'); //get the needed div 
    var imgRight = this.offset().left + this.width(); 
    var imgTop = this.offset().top + this.height(); 

    menuItem.css({ 
     position:'absolute', 
     top: imgTop, 
     left: imgLeft, 
     zIndex:5000 
    }); 

    // now show the corresponding div 
    menuItem.show('slow'); 

    }); 
});

更多信息：

http://api.jquery.com/offset/

来源

2010-07-04 14:43:42 Sarfraz

以及如何将div放置在图像下方？我需要计算位置还是有更好的方法？ – ilann 2010-07-04 14:45:16

@ilann：请看我更新的答案。 – Sarfraz 2010-07-04 14:46:49

我需要z-index悬停吗？ – ilann 2010-07-04 14:51:38

你不应该硬编码或计算这些项目的位置。以下任何CSS规则都应达到您的目标：position: relative; right: 0或float: right:。

很高兴看到您的一些标记用于其他测试。 www.jsfiddle.net是一个很好的资源。

来源

2010-07-04 14:45:24

有两种方法可以做到这一点：正确的方式或作弊的方式... 正确的方法：您需要获得执行对象的顶部和客户端高度 - 客户端高度不可能调用它 - 但上方意味着你必须获取到的所有父对象了 - 使用此：

function J_pos(o) 
{ 
    var x,y; 
    y=o.offsetTop; 
    x=o.offsetLeft; 
    o=o.offsetParent; 
    while(o) 
    { 
     y+=o.offsetTop; 
     x+=o.offsetLeft; 
     o=o.offsetParent; 
    } 
    return [x,y]; 
};

现在你这样做的顶部和客户的高度：

<div style=top:"+(p[0]+obj.clientHeight)+";left:"+p[1]>

作弊路（不那么动态 - 但快速）：把一个标签，如<span>围绕致动（鼠标悬停）对象。使它与位置相对。放置<div>里面：

<div id="ABC" style="position:absolute;left:0;display:none">

现在鼠标悬停把document.getElementById("ABC").style.display=""和bottom:0 - 繁荣宝宝撒。这一点你不得不为每个实例手动做，但是如果你只有3个或者更好的宾果游戏。

来源

2010-07-04 18:47:29

使用jQuery动态定位元素

回答

相关问题