本文主要是介绍为什么鼠标移入角色名称显示的图片随着时间走动而显示与隐藏循环，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>为什么鼠标移入角色名称显示的图片随着时间走动而显示与隐藏循环</title><!-- <link rel="stylesheet" href="file:///D:/data/原神/css/GenshinRoleTableContainer.css"> -->
</head>
<style>/* 原神角色列表样式 */#GenshinRoleTableContainer {z-index:9999;display: flex;table {border-collapse: collapse;caption {background-color: #80a4b1;border-radius: 5px 5px 0 0;}th,td {text-align: center;border: 1px solid #ddd;}th {background-color: #9f9e9e;}td {color: hsl(0, 0%, 100%);text-shadow: 1px 1px 1px #030303;}}/* 3个列表 1个按钮*/#GenshinRoleTable,#cultivateGenshinRole,#haveGenshinRole,#genshinRoleStrategy {margin-top: 35px;}/* 按钮√ */.cultivate,.checkButton {background-color: #f9030300;height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out;}.checkButton::before {content: '获得';display: block;transform: rotate(90deg) translate(-14px, 12px);color: #67c23a;text-shadow: 1px 1px 1px #030303;}.cultivate::before {content: '培养';display: block;transform: rotate(90deg) translate(-14px, 12px);color: #ffcc00;text-shadow: 1px 1px 1px #030303;}/* 数据和品质切换按钮样式 */#switchButton,#sortButton {cursor: pointer;}/* 鼠标移入显示图片添加过渡效果 */.zoom-image {transition: transform 0.3s ease-in-out;transform-origin: center;z-index: 9999;}}/* 原神角色列表样式 结束*//* 修改数据器样式 */#readFolder {/* 修改数据器按钮 *//* font-size: 1.5rem; */color: #e6a23c;cursor: pointer;}#addReadFolder {margin-top: 10px;margin-left: 10px;button {color: #fe0404;cursor: pointer;}#buttonContainer {/* 关闭按钮的 */position: fixed;transform: translate(855%, 25%);button {font-size: 1.2rem;}}/* 保存按钮样式： */#fileSave {transform: translate(960%, 25%);position: fixed;color: #ffd500;text-shadow: 1px 1px 1px #000;font-size: 1.2rem;}#fileContent {white-space: pre-wrap;overflow-y: auto;border: 1px solid #ccc;padding: 5px;}}#dateTime{font-size: 1.2rem;position: fixed;}/* 修改数据器样式 结束*/
</style>
<body><!-- 时间 --><time datetime="2024-07-10" title="2024-07-10" class="dateTime" id="dateTime">2024-07-10</time><!-- 原神角色列表 --><div id="GenshinRoleTableContainer">原神角色列表GenshinRoleTableContainer</div>
</body>
<!-- <script src="file:///D:/data/原神/js/genshin4_8_data.js"></script> -->
<script>function showTime() {var time = document.getElementById("dateTime");if (time) {var d = new Date();var y = d.getFullYear();var m = padZero(d.getMonth() + 1);var W = "星期" + "日一二三四五六".charAt(d.getDay());var D = padZero(d.getDate());var H = padZero(d.getHours());var M = padZero(d.getMinutes());var S = padZero(d.getSeconds());time.innerHTML = y + '-' + m + '-' + D + '<sub>' + W + '</sub>' + H + ':' + M + ':' + S;}}function padZero(num) {return num < 10 ? "0" + num : num;}// 初始调用 showTime 函数showTime();// 每秒调用一次 showTime 函数setInterval(showTime, 1000);/*134角色培养数据*/const cultivateGenshinRole134 = ["宵宫", "夜兰", "班尼特", "钟离","雷电将军", "枫原万叶", "行秋", "瑶瑶","七七", "纳西妲", // 添加新角色];/*152角色培养数据*/const cultivateGenshinRole152 = ["夜兰", "班尼特", "钟离","雷电将军", "枫原万叶", "行秋", "瑶瑶", "夏洛蒂", "香菱",// 添加新角色];/*培养数据* 结束*//* 原神攻略收藏*/const introductionLinks = [{name: '原神wiki角色攻略',url: 'https://bbs.mihoyo.com/ys/strategy/channel/map/37/39?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG'},{name: '提瓦特大地图',url: 'https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,508,2¢er=2008.50,-1084.00&zoom=-3.00'},{name: '原神wiki武器攻略',url: 'https://bbs.mihoyo.com/ys/strategy/channel/map/37/38?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG'},{name: '原神wiki活动攻略',url: 'https://bbs.mihoyo.com/ys/strategy/channel/map/37/40?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG'},{name: '夏洛蒂培养攻略',url: 'https://www.miyoushe.com/ys/article/45239036'},{name: '瑶瑶培养攻略',url: 'https://www.miyoushe.com/ys/article/34411972'},];/* 原神攻略收藏 结束*//* 134获得角色数据*/const haveGenshinRole134 = [{element: "火", // 元素类型role: [{ name: "迪卢克", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "宵宫", level: 90, constellation: 1, talent: "满", note: "备注" },{ name: "迪希雅", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "托马", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "烟绯", level: 80, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "香菱", level: 90, constellation: 3, talent: "1/7/12", note: "备注" },{ name: "班尼特", level: 90, constellation: 5, talent: "满", note: "备注" },{ name: "安柏", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "辛焱", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "嘉明", level: 20, constellation: 4, talent: "1/1/1", note: "备注" },{ name: "夏沃蕾", level: 80, constellation: 0, talent: "1/1/1", note: "备注" },]},{element: "水", // 元素类型role: [{ name: "珊瑚宫心海", level: 90, constellation: 0, talent: "7/10/8", note: "备注" },{ name: "夜兰", level: 90, constellation: 2, talent: "10/10/10", note: "备注" },{ name: "芙宁娜", level: 90, constellation: 1, talent: "9/10/10", note: "备注" },// { name: "那维莱特", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "芭芭拉", level: 60, constellation: 3, talent: "1/1/1", note: "备注" },{ name: "行秋", level: 90, constellation: 6, talent: "6/11/12", note: "备注" },{ name: "坎蒂丝", level: 19, constellation: 1, talent: "1/1/1", note: "备注" },]},{element: "风", // 元素类型role: [{ name: "琴", level: 60, constellation: 2, talent: "1/1/1", note: "备注" },{ name: "枫原万叶", level: 90, constellation: 1, talent: "满", note: "备注" },{ name: "流浪者", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "珐露珊", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "砂糖", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "鹿野院平藏", level: 20, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "琳妮特", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "早柚", level: 80, constellation: 6, talent: "1/1/1", note: "备注" },]},{element: "雷", // 元素类型role: [{ name: "刻晴", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "雷电将军", level: 90, constellation: 3, talent: "满", note: "备注" },{ name: "菲谢尔", level: 90, constellation: 3, talent: "1/1/1", note: "备注" },{ name: "北斗", level: 20, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "丽莎", level: 60, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "雷泽", level: 50, constellation: 2, talent: "1/1/1", note: "备注" },// { name: "赛索斯", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "多莉", level: 20, constellation: 4, talent: "1/1/1", note: "备注" },{ name: "久岐忍", level: 90, constellation: 4, talent: "1/1/1", note: "备注" },{ name: "九条裟罗", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },]},{element: "草", // 元素类型role: [{ name: "纳西妲", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "提纳里", level: 70, constellation: 2, talent: "1/1/1", note: "备注" },{ name: "绮良良", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "卡维", level: 20, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "瑶瑶", level: 90, constellation: 6, talent: "6/12/10", note: "备注" },{ name: "柯莱", level: 20, constellation: 6, talent: "1/1/1", note: "备注" },// { name: "旅行者 (草)", level: 1, constellation: 0, talent: "1/1/1", note: "备注" }]},{element: "冰", // 元素类型role: [{ name: "七七", level: 90, constellation: 1, talent: "9/10/9", note: "备注" },// { name: "优菈", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "菲米尼", level: 20, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "米卡", level: 20, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "莱依拉", level: 40, constellation: 3, talent: "1/1/1", note: "备注" },{ name: "罗莎莉亚", level: 20, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "迪奥娜", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "重云", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "凯亚", level: 60, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "夏洛蒂", level: 50, constellation: 4, talent: "1/1/1", note: "备注" },]},{element: "岩", // 元素类型role: [{ name: "钟离", level: 90, constellation: 0, talent: "9/10/10", note: "备注" },{ name: "云堇", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "五郎", level: 20, constellation: 3, talent: "1/1/1", note: "备注" },{ name: "凝光", level: 70, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "诺艾尔", level: 80, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "旅行者 (岩)", level: 80, constellation: 6, talent: "1/1/1", note: "备注" }]}];/* 134获得角色数据 结束*//* 152获得角色数据*/const haveGenshinRole152 = [{element: "火", // 元素类型role: [// { name: "迪卢克", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "宵宫", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "迪希雅", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "托马", level: 20, constellation: 2, talent: "1/1/1", note: "备注" },{ name: "烟绯", level: 7, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "香菱", level: 90, constellation: 6, talent: "2/7/11", note: "备注" },{ name: "班尼特", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "安柏", level: 31, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "辛焱", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "嘉明", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "夏沃蕾", level: 40, constellation: 4, talent: "1/1/1", note: "备注" },]},{element: "水", // 元素类型role: [{ name: "莫娜", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },// { name: "珊瑚宫心海", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "夜兰", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "芙宁娜", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "那维莱特", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "芭芭拉", level: 90, constellation: 3, talent: "1/1/1", note: "备注" },{ name: "行秋", level: 20, constellation: 4, talent: "1/1/1", note: "备注" },// { name: "坎蒂丝", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },]},{element: "风", // 元素类型role: [{ name: "琴", level: 70, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "枫原万叶", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "流浪者", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "珐露珊", level: 90, constellation: 2, talent: "1/1/1", note: "备注" },// { name: "砂糖", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "鹿野院平藏", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },90{ name: "琳妮特", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "早柚", level: 40, constellation: 3, talent: "1/1/1", note: "备注" },]},{element: "雷", // 元素类型role: [{ name: "刻晴", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "雷电将军", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "菲谢尔", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "北斗", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },{ name: "丽莎", level: 36, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "雷泽", level: 20, constellation: 2, talent: "1/1/1", note: "备注" },// { name: "赛索斯", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "多莉", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "久岐忍", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "九条裟罗", level: 40, constellation: 6, talent: "1/1/1", note: "备注" },]},{element: "草", // 元素类型role: [// { name: "纳西妲", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "提纳里", level: 39, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "绮良良", level: 40, constellation: 2, talent: "1/1/1", note: "备注" },{ name: "卡维", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "瑶瑶", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "柯莱", level: 70, constellation: 2, talent: "1/1/1", note: "备注" },{ name: "旅行者 (草)", level: 90, constellation: 6, talent: "1/1/1", note: "备注" }]},{element: "冰", // 元素类型role: [// { name: "七七", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },// { name: "优菈", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "菲米尼", level: 40, constellation: 5, talent: "1/1/1", note: "备注" },{ name: "米卡", level: 60, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "莱依拉", level: 70, constellation: 2, talent: "1/1/1", note: "备注" },{ name: "罗莎莉亚", level: 49, constellation: 1, talent: "1/1/1", note: "备注" },// { name: "迪奥娜", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "重云", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "凯亚", level: 60, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "夏洛蒂", level: 60, constellation: 6, talent: "1/1/1", note: "夏洛蒂主要定位是攻击治疗续航辅助，其被动在与其他枫丹角色组成配队时会获得额外治疗加成收益。但和非枫丹角色搭配会获得冰伤加成，可以考虑在一定程度上开发输出但主流仍为奶妈。" },]},{element: "岩", // 元素类型role: [{ name: "钟离", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "云堇", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "五郎", level: 1, constellation: 1, talent: "1/1/1", note: "备注" },{ name: "凝光", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },{ name: "诺艾尔", level: 34, constellation: 4, talent: "1/1/1", note: "备注" },]}];/* 152获得角色数据 结束*//* 原神4.8版本角色数据*/const GenshinRole = [{element: "火", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Pyro.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "阿蕾奇诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arlecchino/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "林尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lyney/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "迪希雅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dehya/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "迪卢克", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diluc/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "胡桃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/hu_tao/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "可莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/klee/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "宵宫", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yoimiya/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "托马", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/thoma/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "烟绯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yanfei/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "香菱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xiangling/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "班尼特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/bennett/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "安柏", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/amber/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "辛焱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xinyan/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "嘉明", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/gaming/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "夏沃蕾", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chevreuse/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "旅行者 (火)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_electro/image.png?strip=all&quality=100&w=140" },]},{element: "水", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Hydro.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "妮露", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/nilou/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "莫娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mona/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "达达利亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/tartaglia/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "珊瑚宫心海", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sangonomiya_kokomi/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "希格雯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sigewinne/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "夜兰", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yelan/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "神里绫人", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kamisato_ayato/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "芙宁娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/furina/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "那维莱特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/neuvillette/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "芭芭拉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/barbara/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "行秋", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xingqiu/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "坎蒂丝", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/candace/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "旅行者 (水)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_anemo/image.png?strip=all&quality=100&w=140" },]},{element: "风", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Anemo.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "温迪", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/venti/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "琴", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/jean/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "魈", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xiao/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "闲云", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xianyun/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "枫原万叶", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaedehara_kazuha/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "流浪者", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/wanderer/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "珐露珊", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/faruzan/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "砂糖", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sucrose/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "鹿野院平藏", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/shikanoin_heizou/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "琳妮特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lynette/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "早柚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sayu/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "旅行者 (风)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_anemo/image.png?strip=all&quality=100&w=140" },]},{element: "雷", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Electro.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "刻晴", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/keqing/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "雷电将军", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/raiden_shogun/image.png?strip=all&quality=100&w=140" },{ star: "5", name: "八重神子", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yae_miko/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "克洛琳德", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/clorinde/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "赛诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/cyno/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "菲谢尔", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/fischl/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "北斗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/beidou/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "丽莎", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lisa/image.png?strip=all&quality=100&w=140" },{ star: "4", name: "雷泽", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/razor/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "赛索斯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sethos/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "多莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dori/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "久岐忍", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kuki_shinobu/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "九条裟罗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kujou_sara/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "旅行者 (雷)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_dendro/image.png?strip=all&quality=100&w=140" }]},{element: "草", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Dendro.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "艾梅莉埃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/emilie/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "艾尔海森", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/alhaitham/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "白术", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/baizhu/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "纳西妲", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/nahida/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "提纳里", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/tighnari/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "绮良良", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kirara/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "卡维", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaveh/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "瑶瑶", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yaoyao/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "柯莱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/collei/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "旅行者 (草)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_dendro/image.png?strip=all&quality=100&w=140" }]},{element: "冰", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Cryo.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "莱欧斯利", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/wriothesley/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "七七", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/qiqi/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "甘雨", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/ganyu/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "申鹤", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/shenhe/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "神里绫华", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kamisato_ayaka/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "埃洛伊", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/aloy/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "优菈", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/eula/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "菲米尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/freminet/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "米卡", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mika/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "莱依拉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/layla/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "罗莎莉亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/rosaria/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "迪奥娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diona/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "重云", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chongyun/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "凯亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaeya/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "夏洛蒂", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/charlotte/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "旅行者 (冰)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_geo/image.png?strip=all&quality=100&w=140" }]},{element: "岩", // 元素类型elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Geo.png?strip=all&quality=75&w=48", // 元素图标role: [{ star: "5", name: "千织", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chiori/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "娜维娅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/navia/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "荒泷一斗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arataki_itto/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "阿贝多", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/albedo/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "钟离", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/zhongli/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "云堇", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yun_jin/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "五郎", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/gorou/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "凝光", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/ningguang/image.png?strip=all&quality=100&w=140", },{ star: "4", name: "诺艾尔", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/noelle/image.png?strip=all&quality=100&w=140", },{ star: "5", name: "旅行者 (岩)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_geo/image.png?strip=all&quality=100&w=140", },]}];/* 原神4.8版本角色数据 结束*//* 原神元素颜色*/const elementColors = {"火": "#FF9933","水": "#3399FF","风": "#66c6ac","雷": "#CC66FF","草": "#66CC66","冰": "#99CCFF","岩": "#FFCC33"};document.getElementById('GenshinRoleTableContainer').innerHTML = `
<div><!-- 已有角色列表 --><table id="haveGenshinRole"></table>
</div>
<div><!-- 培养角色列表 --><table id="cultivateGenshinRole"></table>
</div>
<div></div>
`;function getElementColor(element) {return elementColors[element];}function getElementImage(element) {const foundElement = GenshinRole.find(e => e.element === element);return foundElement ? foundElement.elementImage : "";}function getCharacterImage(role) {for (const element of GenshinRole) {const foundRole = element.role.find(r => r.name === role);if (foundRole) {return foundRole.image;}}return "";}let isSorted = false;let currentHaveGenshinRoleData = haveGenshinRole134;let currentCultivateGenshinRoleData = cultivateGenshinRole134;function initializeTable(table, captionText, isAddButton = false) {table.innerHTML = `<caption><b>${captionText}</b> </caption><tr><th>序号</th><th>角色</th><th class="hidden-star">星级</th><th>等级</th><th>命座</th><th style="width:100px;">天赋</th><th>备注</th></tr>`;if (isAddButton) {const sortButton = document.createElement('button');sortButton.id = 'sortButton';sortButton.innerHTML = '品质排序';table.querySelector('caption b').insertAdjacentElement('afterend', sortButton);sortButton.addEventListener('click', () => {isSorted = !isSorted;sortTable(table, isSorted);});const switchButton = document.createElement('button');switchButton.id = 'switchButton';switchButton.innerHTML = '切换数据';table.querySelector('caption b').insertAdjacentElement('afterend', switchButton);switchButton.addEventListener('click', () => {currentHaveGenshinRoleData = currentHaveGenshinRoleData === haveGenshinRole134 ? haveGenshinRole152 : haveGenshinRole134;currentCultivateGenshinRoleData = currentCultivateGenshinRoleData === cultivateGenshinRole134 ? cultivateGenshinRole152 : cultivateGenshinRole134;renderTable();GenshinRoleTable();});}if (captionText === "134获得角色数据" || captionText === "152获得角色数据") {table.querySelectorAll('th').forEach((th, index) => {if (index === 6) th.style.display = 'none';});}table.querySelectorAll('.hidden-star').forEach(th => th.style.display = 'none');}function renderTable() {const haveGenshinRoleTable = document.getElementById("haveGenshinRole");initializeTable(haveGenshinRoleTable, currentHaveGenshinRoleData === haveGenshinRole134 ? "134获得角色数据" : "152获得角色数据", true);let row = 1;currentHaveGenshinRoleData.forEach((elementData) => { // 使用 currentHaveGenshinRoleData 数组elementData.role.forEach((character) => {addCharacterRow(haveGenshinRoleTable, character, elementData.element, row++);});});if (haveGenshinRoleTable.querySelector('caption b').innerText === "134获得角色数据" || haveGenshinRoleTable.querySelector('caption b').innerText === "152获得角色数据") {haveGenshinRoleTable.querySelectorAll('td:nth-child(7)').forEach(td => td.style.display = 'none');}const cultivateGenshinRoleTable = document.getElementById("cultivateGenshinRole");initializeTable(cultivateGenshinRoleTable, currentCultivateGenshinRoleData === cultivateGenshinRole134 ? "134重点培养的角色" : "152重点培养的角色", false);row = 1;currentCultivateGenshinRoleData.forEach((characterName) => {const elementData = currentHaveGenshinRoleData.find(e => e.role.some(r => r.name === characterName));if (elementData) {const fullCharacterData = elementData.role.find(r => r.name === characterName);addCharacterRow(cultivateGenshinRoleTable, fullCharacterData, elementData.element, row++);}});}function addCharacterRow(table, character, element, rowNumber) {const newRow = table.insertRow();newRow.insertCell().textContent = rowNumber;const roleCell = newRow.insertCell();roleCell.textContent = character.name;const isCultivateRole = currentCultivateGenshinRoleData.includes(character.name);if (isCultivateRole && table.id === "haveGenshinRole") {const cultivateButton = document.createElement('button');cultivateButton.className = 'cultivate';roleCell.appendChild(cultivateButton);}const star = getStar(character.name, element);roleCell.style.color = star === "5" ? "#ac7647" : "#846baa";const starCell = newRow.insertCell();starCell.textContent = star;starCell.style.display = 'none';newRow.insertCell().innerHTML = `<span >${character.level}</span>`;newRow.insertCell().innerHTML = `<span >${character.constellation}</span>`;newRow.insertCell().innerHTML = `<span >${character.talent}</span>`;newRow.insertCell().innerHTML = `<span >${character.note}</span>`;newRow.style.backgroundColor = getElementColor(element);roleCell.addEventListener('mouseenter', (event) => showZoomImage(character.name, event));roleCell.addEventListener('mouseleave', hideZoomImage);}function getStar(roleName, element) {const elementData = GenshinRole.find(e => e.element === element);if (elementData) {const role = elementData.role.find(r => r.name === roleName);return role ? role.star : "";}return "";}function showZoomImage(roleName, event) {const img = createZoomImage(roleName, event);document.body.appendChild(img);}function createZoomImage(roleName, event) {const img = document.createElement('img');img.src = getCharacterImage(roleName);img.style.transform = 'scale(3)';img.style.position = 'fixed';img.style.zIndex = '1000';img.style.left = `${event.clientX + 10}px`;img.style.top = `${event.clientY + 10}px`;img.classList.add('zoom-image');if (event.clientY + img.height + 20 > window.innerHeight) {img.style.top = `${event.clientY - img.height - 10}px`;}return img;}function hideZoomImage() {const img = document.querySelector('img.zoom-image');if (img) {img.remove();}}renderTable();/* 获得角色数据列表 结束*/
</script>
</html>这篇关于为什么鼠标移入角色名称显示的图片随着时间走动而显示与隐藏循环的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
![C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量](https://i-blog.csdnimg.cn/direct/cda2638386c64e8d80479ab11fcb14a9.png)
