使用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動態定位元素

回答

相關問題