版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liona_koukou/article/details/84972353
需求来自于地图绘制图形时想要提示内容比如“单击左键开始绘制”“双击左键结束绘制”,在此封装一个鼠标跟随提示的方法,要在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>