很抱歉，如果這似乎微不足道，我要問，但..放大圖像，並與鼠標指針移動過來
我有一些圖片，我需要他們的時候我將鼠標懸停我的鼠標移到他們放大。但是..我想讓放大的圖像在指針旁邊粘貼，因爲我在圖像上移動它。我不知道該怎麼稱呼它。我很確定這只是用JavaScript完成的，只是CSS不會在這裏工作。
像這樣的http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/，但你知道，它必須隨着指針運動。
這樣做最有效的方法是什麼？
以前的答案可能是你要尋找什麼，你可能已經解決了這個問題。但我注意到，你沒有在你的文章中提到jquery，並且所有這些答案都涉及到這個問題。所以對於一個純粹的JS解決方案...
我會從問題的措辭方式假設你已經知道如何彈出圖像了嗎？這可以通過在html中編寫絕對定位的隱藏img標籤或使用JS隨時生成。如果你是一個JS新手，前者可能會更容易。在我的例子，我會假設你做了類似下面的內容：
<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">
然後，你需要一個的onMouseOver功能，爲您的縮略圖。此功能必須做三兩件事：
1）根據實際圖像文件到隱藏的圖像
//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;
2）位置的隱藏圖像
//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;
3）使隱藏的圖像出現
document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';
然後，您需要捕獲onMouseMove事件並更新現在未隱藏的圖像e的位置使用與上面（2）中使用的相同的代碼來定位圖像。這將是類似於以下內容：
//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
var curCursorX = e.pageX;
var curCursorY = e.pageY;
} else {
var curCursorX = e.clientX + document.body.scrollLeft;
var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;
而這應該只是做到這一點。只需添加一個onMouseOut事件再次隱藏bigImg圖像。您可以將最後兩行中的「+1」更改爲您想要將圖像正確放置到光標相關的任何位置。
請注意，以上所有代碼僅用於演示目的;我還沒有測試過它，但它應該讓你走上正軌。您可能希望通過預加載較大的圖像來進一步擴展此想法。你也可以通過使用setTimeout來每20ms左右更新位置來捕獲mousemove事件，儘管我認爲這種方法更加複雜和不太理想。我只提到它，因爲一些開發人員（包括我在開始時）對JS事件處理有反感。
我用一個自定義的ColdFusion標記做了類似的事情，我寫了一個可以生成浮動div的用戶，可以在屏幕上單擊並拖動。原理相同。如果你需要我，我可以更深入地回答任何其他問題。
祝你好運！
，如果我理解你改正你想把你的大圖像放在光標上。 jQuery的一個解決方案（我不是100％肯定，這裏的代碼，但邏輯是存在的）：
$('.thumb').hover(function(e){
var relativeX = e.pageX - 100;
var relativeY = e.pageY - 100;
$(.image).css("top", relativeY);
$(.image).css("left", relativeX);
$(.image).show();
}, function(){
$(.image).hide();
})
Liece的解決方案是接近，但不會達到大圖像的光標後的預期效果。
下面是jQuery的一個解決方案：
$(document).ready(function() {
$("img.small").hover (function() {
$("img.large").show();
}, function() {
$("img.large").hide();
});
$("img.small").mousemove(function(e) {
$("img.large").css("top",e.pageY + 5);
$("img.large").css("left",e.pageX + 5);
});
});
的HTML是：
<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">
CSS：
img { position: absolute; }
Jquery是最簡單的路線。絕對位置是關鍵。
^除上述之外，這裏是一個可用的JS小提琴。訪問：jsfiddle.net/hdwZ8/1/
它已被粗略編輯，所以它不使用整體IMG css標籤，現在任何人都可以輕鬆使用。
我在Wordpress客戶端網站中使用此腳本代替Lightbox，使用鼠標快速縮放圖像比IMO更好。使用WP PHP中繼器循環中的AdvancedCustomFields插件&來製作高效的畫廊非常容易！
http://api.jquery.com/event.pageX/ – liece