JavaScript鼠标跟随显示内容

需求来自于地图绘制图形时想要提示内容比如“单击左键开始绘制”“双击左键结束绘制”，在此封装一个鼠标跟随提示的方法，要在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>

JavaScript鼠标跟随显示内容

猜你喜欢