【JavaScript】跟随鼠标的提示框

Acrgi
于 2023-03-09 20:43:42 发布
阅读量282
点赞数
文章标签： javascript 开发语言
本文链接：https://blog.csdn.net/Acrgi/article/details/129430918
版权
<!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>
        a{
            display: block;
            font-size: 40px;
            margin: 100px;
            width: 160px;
        }
        #msg{
            width: 600px;
            height: auto;
            background-color: aqua;
            color: black;
            display: none;
            position:absolute;
        }
    </style>
    <script>
        var arr = ["幻象就是喜欢与众不同。作为四兄弟中的老幺，他擅长透过戏弄人来吸引目光。他唯一认真看待的东西就是幻影铁驭科技：这个能创造幻影的科技是由他的工程师母亲介绍给他的，他从此着迷于此技术并尽力学习所有相关知识。尽管他的兄弟们都在边境战争中失踪了，幻象和他的母亲仍然持续研发幻影装置，这项工作让他们俩越来越亲近。担任酒保来讨生活的幻象常常从客人口中听说Apex 竞赛的精彩故事和赢家所能获得财富与荣耀。尽管这听起来十分美好，他却不能冒险让她的母亲断后－－直到她给了幻象一组客制化的幻影装置并要他去追寻自己的梦想。现在幻象成为了Apex 竞赛中的焦点人物，他擅长以智取敌并获得边疆观众的喜爱。", "大胆、莽撞、泼辣且凶悍的今原凯笠可不怕使用贿赂的手段或是犯法。小时候，她偷了一具泰坦。这具泰坦属于她父亲，而她父亲的呼叫代号是毒蛇。她希望在长大之后跟自己父亲一样，但是隔天父亲去执行任务后，却一去不回。从某种层面来说，她依然继承了他的衣钵：虽然不是泰坦，但是她的船舰却让她能够过上不错的日子。然而，她的人生却完全不一样。白天，她靠走私贵重货物维生；晚上，她会在酒吧里与不法之徒和佣兵们拼酒。但尽管她有得是女人、烈酒和对天空的热情，她却仍然执着于找出派父亲去冒险的那个人：他的指挥官，库本·布里斯克。她找到了布里斯克，并准备要杀了他。但他提及她父亲时，口吻中满是敬意——然后他要她变得更强。最后，她还是朝他开了一枪。但却没有杀了他。她只要知道自己有能力这么做就行了。嗯， 她还顺手将布里斯克手中的 Apex 竞赛卡给拿走。她用毒蛇的北极星中残存的飞行核心打造了一个精致的新喷射背包来纪念自己的父亲。此刻，今原香衣璃终于能够自己遨翔……到了最后，她还是以某种方式继承了父亲的泰坦。" , "生于军事家庭，她的父母和四位哥哥都在IMC 的武装部队中服役，而邦加罗尔更是从小就展现了出色的军事天赋。她在IMC 军事学院中是班上的榜首，她是唯一一名能够蒙着眼睛在二十秒内拆开和平捍卫者、装上精准束流上旋并将其重新组装的学生。三年前，安妮塔和她的哥哥杰克森被派去取回一艘边疆中的佣兵船舰来帮助IMC 对抗反抗军。然而，她们的单位却和IMC 总部失去了联系并在抵达时中了埋伏。尽管小队被击溃，杰克森却为了给妹妹争取时间逃脱留下来断后。独自一人且无法回家的安妮塔透过加入Apex 竞赛来善用自己所受过的训练、对武器的大量知识与自己的竞争精神。现在，她为了赚取回到IMC 总部所需的金钱而战，她希望能再次与所剩无几的家人团聚。" , "直布罗陀是一名温柔的巨人，但他也有疯狂的一面。身为两名SARAS（索拉斯搜索与救援组织）自愿者的儿子，他从小就懂得如何帮助他人摆脱边疆的各种危险情况。然而，当他和他的男友偷骑父亲的摩托车并受困于危险的土石流中后，他才了解到保护他人的真正意义。他的父母救出了他，而他的父亲却在这段过程中失去了一条手臂。直布罗陀至今不忘父亲的牺牲并致力于帮助那些需要帮助的人。Apex竞赛并没有改变这一点，但是他们却改变了其中的意义。多年来，许多直布罗陀的朋友和同事们都去参与这场竞赛以求财富、名声与荣耀，但是有许多人从此一去不回。直布罗陀加入了竞赛来保护他们，他身为救援人员的技能和叛逆的个性首次如此融洽地相辅相成。他现在成为了Apex 竞赛中的标志性人物，他常常冲向战火来保护队友并让对手为了寻找掩护而四处逃窜。"];
        //[注意]arr数组中是按照a标签的下标去储存对应的描述信息的
        window.onload = function(){
            var aAs = document.getElementsByTagName("a");
            var oMsg = document.getElementById("msg");
            for(var i = 0; i < aAs.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.style.left = e.clientX + 5 + 'px';
                    oMsg.style.top = e.clientY + 5 + 'px';

                }
            }
        }
    </script>
</head>
<body>
    <a href="#">幻象</a>
    <a href="#">瓦尔基里</a>
    <a href="#">班加罗尔</a>
    <a href="#">直布罗陀</a>
    <div id = 'msg'></div>
</body>
</html>