js随鼠标的位置显示提示框

最新推荐文章于 2022-08-04 14:00:43 发布

sam80000

最新推荐文章于 2022-08-04 14:00:43 发布

阅读量2.3k

点赞数

分类专栏：前端知识点文章标签： js

本文链接：https://blog.csdn.net/sam80000/article/details/115463092

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

随鼠标的位置显示提示框内容

一、思路及知识点
二、代码

一、思路及知识点

首先要做到鼠标放到那个标签，那个标签的显示出来。用DOM中事件对象属性，获取当前鼠标位置，然后将获得的位置插入到显示框内。

二、代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        a {
            display: block;
            font-size: 18px;
            margin: 100px;
            width: 130px;
        }

        #msg {
            width: 600px;
            height: 130px;
            background-color: gray;
            color: white;
            display: none;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
    var  msgs=["1内容","2内容","3内容","4内容"];
        window.onload = function () {
            var oAs = document.getElementsByTagName("a");
            var oDiv = document.getElementById("msg");
            
            //给标签绑定事件
            for(var i=0;i<oAs.length;i++){
                oAs[i].index=i; //给每个节点添加标记。
                //鼠标移入显示
                oAs[i].onmouseover=function(){
                    oDiv.style.display="block";
                    oDiv.innerHTML=msgs[this.index];//显示对应标记的内容
                    console.log(this);
                    
                }
/*                 oAs[i].οnmοuseοut=function(){
                    oDiv.style.display="none";
            } */

                //添加鼠标移动事件
                oAs[i].onmousemove=function(ev){
                    var e= ev || window.event;
                    oDiv.style.left=e.clientX+"px";
                    oDiv.style.top=e.clientY+"px";
                    
        }
    }
}

    </script>
</head>

<body>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <div id="msg"></div>
</body>

</html>

sam80000

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js随鼠标的位置显示提示框

随鼠标的位置显示提示框内容一、思路及知识点二、代码一、思路及知识点首先要做到鼠标放到那个标签，那个标签的显示出来。用DOM中事件对象属性，获取当前鼠标位置，然后将获得的位置插入到显示框内。二、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
复制链接

扫一扫