如何使用jQuery定位相對於鼠標指針的div？

假設我在我的頁面中有一個鏈接，我希望當我將鼠標放在鏈接上時，div會根據鼠標x，y顯示在那裏。如何使用jQuery定位相對於鼠標指針的div？

我該如何使用jQuery來完成這項工作？

2011-01-12 Thomas

http://stackoverflow.com/questions/15494357/want-to-show-div-just-under-the-link-using-jquery-when-user-click-on-link http：//堆棧溢出。com/questions/15635270 /奇怪的行爲的下拉菜單創建的jquery – Thomas 2013-03-28 08:31:18

var mouseX; 
var mouseY; 
$(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 
$(".classForHoverEffect").mouseover(function(){ 
    $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); 
});

上面的函數將使DIV出現在頁面上可能存在的任何鏈接上。當鏈接懸停時，它會慢慢消失。您也可以使用.hover（）。從那裏DIV會留下來，所以如果你想在DIV消失，當鼠標移開，然後，

$(".classForHoverEffect").mouseout(function(){ 
    $('#DivToShow').fadeOut('slow'); 
});

如果DIV已經定位，你可以簡單地使用

$('.classForHoverEffect').hover(function(){ 
    $('#DivToShow').fadeIn('slow'); 
});

而且請記住，您的DIV格式需要設置爲display:none;才能淡入或顯示。

來源

2011-01-12 07:48:00 mcbeav

k，有點搞砸了，不完全確定你想在這裏實現什麼，但你可以得到鼠標的座標使用第一個函數mousemove，它將它存儲在變量mouseX和mouseY中，然後可以從這些變量中添加或減去想要達到的距離，如果這樣做有道理的話。 – mcbeav 2011-01-12 07:55:21

感謝您的回答:)。 – Thomas 2011-01-12 08:12:29

當然，如果你需要任何指定或更多的幫助，只需在評論中張貼在這裏。 – mcbeav 2011-01-12 08:13:09

-2

<script type="text/javascript" language="JavaScript"> 

    var cX = 0; 
    var cY = 0; 
    var rX = 0; 
    var rY = 0; 

    function UpdateCursorPosition(e) { 
    cX = e.pageX; 
    cY = e.pageY; 
    } 

    function UpdateCursorPositionDocAll(e) { 
    cX = event.clientX; 
    cY = event.clientY; 
    } 
    if (document.all) { 
    document.onmousemove = UpdateCursorPositionDocAll; 
    } else { 
    document.onmousemove = UpdateCursorPosition; 
    } 

    function AssignPosition(d) { 
    if (self.pageYOffset) { 
     rX = self.pageXOffset; 
     rY = self.pageYOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) { 
     rX = document.documentElement.scrollLeft; 
     rY = document.documentElement.scrollTop; 
    } else if (document.body) { 
     rX = document.body.scrollLeft; 
     rY = document.body.scrollTop; 
    } 
    if (document.all) { 
     cX += rX; 
     cY += rY; 
    } 
    d.style.left = (cX + 10) + "px"; 
    d.style.top = (cY + 10) + "px"; 
    } 

    function HideContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    document.getElementById(d).style.display = "none"; 
    } 

    function ShowContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    dd.style.display = "block"; 
    } 

    function ReverseContentDisplay(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    if (dd.style.display == "none") { 
     dd.style.display = "block"; 
    } else { 
     dd.style.display = "none"; 
    } 
    } 
    //--> 
</script> 


<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')"> 
[show on mouseover, hide on mouseout] 
</a> 
<div id="uniquename3" style="display:none; 
position:absolute; 
border-style: solid; 
background-color: white; 
padding: 5px;"> 
    Content goes here. 
</div>

來源

2012-03-17 05:07:39

您不需要創建$(document).mousemove(function(e) {})來處理鼠標x，y。獲取$.hover函數中的事件，並從那裏獲得鼠標的x和y位置。看到下面的代碼：

$('foo').hover(function(e){ 
    var pos = [e.pageX-150,e.pageY]; 
    $('foo1').dialog("option", "position", pos); 
    $('foo1').dialog('open'); 
},function(){ 
    $('foo1').dialog('close'); 
});

來源

2012-07-19 05:56:07

有很多使用JQuery檢索鼠標座標的例子，但沒有解決我的問題。

我網頁的正文是1000個像素寬，我居中在用戶的瀏覽器窗口的中間。

body { 
    position:absolute; 
    width:1000px; 
    left: 50%; 
    margin-left:-500px; 
}

現在，在我的JavaScript代碼中，當用戶右鍵單擊我的頁面時，我想要一個div出現在鼠標位置。

問題是，只是使用e.pageX值不是很對。如果我將瀏覽器窗口的大小調整爲大約1000像素，它會很好地工作。然後，彈出格將出現在正確的位置。

但是，如果將我的瀏覽器窗口的大小增加到1200像素寬，那麼div將出現大約100像素到用戶點擊的位置的右邊。

解決方案是將e.pageX與body元素的邊界矩形相結合。當用戶改變他們的瀏覽器窗口的大小，「左」的主體元素的變化值，我們需要考慮到這一點：

// Temporary variables to hold the mouse x and y position 
var tempX = 0; 
var tempY = 0; 

jQuery(document).ready(function() { 
    $(document).mousemove(function (e) { 
     var bodyOffsets = document.body.getBoundingClientRect(); 
     tempX = e.pageX - bodyOffsets.left; 
     tempY = e.pageY; 
    }); 
})

唷。我花了一段時間來修復！我希望這對其他開發者有用！

來源

2012-09-20 07:50:38

如何使用jQuery定位相對於鼠標指針的div？

回答

相關問題