JavaScript滑鼠跟隨顯示內容
阿新 • • 發佈：2018-12-12
需求來自於地圖繪製圖形時想要提示內容比如“單擊左鍵開始繪製”“雙擊左鍵結束繪製”，在此封裝一個滑鼠跟隨提示的方法，要在vue裡使用可相應做一下調整
效果如下：（截圖無法截出滑鼠，可直接執行程式碼檢視效果）
實際專案應用效果：
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑鼠跟隨方法封裝</title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #map{ position:relative; width:400px; height:400px; margin:300px auto; border-radius:8px; -webkit-box-shadow: 0 0 15px 2px rgba(0,0,0,.3); -moz-box-shadow: 0 0 15px 2px rgba(0,0,0,.3); box-shadow: 0 0 15px 2px rgba(0,0,0,.3); cursor:pointer; } #map:hover{ -webkit-box-shadow: 0 0 30px 2px rgba(0,0,0,.3); -moz-box-shadow: 0 0 30px 2px rgba(0,0,0,.3); box-shadow: 0 0 30px 2px rgba(0,0,0,.3); } </style> </head> <body> <div id="map"></div> <script> window.onload = function () { // -------使用方法 var myMap = document.getElementById('map') var mapLeft = myMap.offsetLeft var mapTop = myMap.offsetTop - document.documentElement.scrollTop var myHint = document.createElement('div') myHint.style.position = 'absolute' myMap.appendChild(myHint) WordsFollowMouseDOM(myMap, myHint, mapLeft, mapTop, 1) // -------使用方法 } /** * 滑鼠跟隨提示 * param: * myMap-在此區域內有滑鼠跟隨提示，超出區域則沒有 * myHint-新建的跟隨內容區域 * mapLeft-活動區域距離瀏覽器工作區左側距離 * mapTop-活動區域距離瀏覽器工作區頂側距離 * hintwords：1-單擊左鍵開始繪製、2-雙擊左鍵結束繪製、其他值-不顯示跟隨資訊 **/ function WordsFollowMouseDOM(myMap, myHint, mapLeft, mapTop, hintwords) { myMap.addEventListener('mousemove', function(e) { myHint.style.minWidth = '100px' myHint.style.left = e.clientX - mapLeft + 10 + 'px' myHint.style.top = e.clientY - mapTop + 2 + 'px' myHint.style.backgroundColor = 'rgba(52,126,255,0.6)' myHint.style.padding = '2px 4px' myHint.style.fontSize = '12px' myHint.style.color = '#fff' myHint.style.borderRadius = '2px' myHint.style.fontWeight = '10' switch (hintwords) { // 狀態可根據實際需求變更 case 1: myHint.innerHTML = '單擊左鍵開始繪製' myHint.style.display = 'block' break case 2: myHint.innerHTML = '雙擊左鍵結束繪製' myHint.style.display = 'block' break default: myHint.innerHTML = '' myHint.style.display = 'none' break } }) myMap.addEventListener('mouseout', function(e) { myHint.innerHTML = '' myHint.style.display = 'none' }) } </script> </body> </html>