JavaScript | 滑鼠懸停動態彈出浮動視窗顯示圖片 | clientX, clientY, scrollLeft, scrollTop
阿新 • • 發佈：2019-01-01
動態彈出浮動視窗顯示圖片的效果是這樣子的：
不多說，直接上程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js彈出窗</title> <style> a{ float: left; margin-left:30px; margin-top: 50px; } img{ width:400px; border:black 1px solid; } #image{ position: absolute; display: none; } </style> <script> //顯示圖片 function displayImg() { var img = document.getElementById("image"); var x = event.clientX + document.body.scrollLeft + 20; var y = event.clientY + document.body.scrollTop - 5; img.style.left = x + "px"; img.style.top = y + "px"; img.style.display = "block"; } //圖片消失 function vanishImg(){ var img = document.getElementById("image"); img.style.display = "none"; } </script> </head> <body> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 滑鼠移至這裡顯示圖片 </a> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 滑鼠移至這裡顯示圖片 </a> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 滑鼠移至這裡顯示圖片 </a> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 滑鼠移至這裡顯示圖片 </a> <!--動態顯示的圖片--> <div id="image"> <img src="XXXX.png" alt=""><!--如果加上AJAX就可以根據不同的超連結來顯示不同的圖片了--> </div> </body> </html>
這段程式碼很簡單，基本誰都看得懂。不過其中有兩個概念很容易被混淆，一個是 clientX 和 clientY，另一個是 scrollLeft 和 scrollTop。這兩個屬性經常使用，通過這兩個屬性，一個網頁中的所有座標盡在掌握之中。
（1）clientX 和 clientY 需配合 event 使用，用於觸發滑鼠事件時，獲取滑鼠在網頁中的橫和縱座標。用W3C的解釋是，clientX 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的水平座標；clientY 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的垂直座標。
（2）scrollLeft 和 scrollTop 常常配合 body 來使用，其中 scrollLeft是網頁被捲去的左，scrollTop
是網頁被捲去的高。問題來了，什麼是“被捲去”？其可以理解為你看一個內容豐富的網頁時，用滑鼠往下滾輪滾動後，網頁會有一部分被捲走了，然後出現往下新的部分。根據這一特性，通過 clientX + scrollLeft 就可以獲取到當前滑鼠基於整個網頁的橫座標，通過
clientY + scrollTop 就可以獲取到當前滑鼠基於整個網頁的縱座標。
這段程式碼的核心是，設定要彈出的圖片DIV為絕對定位，然後在js中動態修改樣式中的 left 和 top 屬性來控制DIV在網頁中的顯示位置。