实现跟随鼠标提示框

最新推荐文章于 2022-09-29 22:25:38 发布

pj1653_9

最新推荐文章于 2022-09-29 22:25:38 发布

阅读量568

点赞数 1

本文链接：https://blog.csdn.net/pj1653_9/article/details/106568968

版权

html部分
在这里插入图片描述
js部分

/*
              事件类型：
                 mouseover
                    让提示框显示
                 mouseout
                    让提示框隐藏
                 mousemove
                    让提示框跟随鼠标去移动
                    clientX  clientY 原点位置：可视窗口的左上角为原点
            */

            //提示框内容
            var arr = ["唐太宗","唐高宗","武则天","唐玄宗"];
            //【注】arr数组中是按照a标签的下标去存储对应的描述信息的
            
            //把页面上的所有a、div标签获取到
            var aAs = document.getElementsByTagName("a");
            var oMsg = document.getElementById("msg");
            
            //给每个标签添加鼠标事件
            for(var i=0;i<arr.length;i++){
                //给每个标签添加自定义属性
                aAs[i].index = i;

                aAs[i].onmouseover = function(){
                    //将内容进行修改
                    oMsg.innerHTML = arr[this.index];
                    oMsg.style.display = "block"; 
                }
                aAs[i].onmouseout = function(){
                    oMsg.style.display = "none"; 
                }

                //添加鼠标移动事件
                aAs[i].onmousemove = function(ev){
                    //先获取事件对象
                    var e = ev || window.event;
                    //改变当前oMsg位置
                    oMsg.style.left = e.clientX + 5 + "px";
                    oMsg.style.top = e.clientY + 5 + "px";

                }
            }