时间：2023-10-05 13:18:02 | 来源：网站运营
时间：2023-10-05 13:18:02 来源：网站运营
HTML 浮窗代码：最近在设计并撰写自己定义的第一个小项目, 其中在开发中需要使用到一个漂浮窗口的功能, 使用
在线咨询
javascript 撰写的, 先上一下我写好的成品样子：.js 里面作为界面加载完成后生成这个样式。window.onload = function () { let medusa = document.createElement('div'); medusa.setAttribute('class', 'medusa'); let base_url = CheckImgExists('static/Github.png') ? 'static/' : '../static/'; medusa.innerHTML = '' + '<div><a onclick="goTop()" title="Top"><img class="pass" src="' + base_url + 'Top.png"></a></div>' + '<div><a href="https://www.github.com/MedusaSorcerer/" title="Github" target="_blank"><img class="pass" src="' + base_url + 'Github.png"></a></div>' + '<div><a href="https://juejin.im/user/2805609406139950" title="掘金" target="_blank"><img class="pass" src="' + base_url + 'Juejin.png"></a></div>'; document.body.appendChild(medusa);}function CheckImgExists(url) { let ImgObj = new Image(); ImgObj.src = url; return ImgObj.width > 0;}function goTop() { let scrollToTop = setInterval(function () { let pos = window.pageYOffset; if (pos > 0) { window.scrollTo(0, pos - 20); } else { window.clearInterval(scrollToTop); } }, 10);} 第一部分是在界面加载完成后执行 HTML 代码插入, 当然, 你需要替换其中的图片路径以及 A 标签 HREF 路径作为你自己的值, 第二部分是因为我在使用图片路径时遇到的解析问题, 所以第二个函数部分是判断图片路径是否存在, 否则使用 ../ 的方式追加到父级目录上, 第三部分则是使用回到顶部的按钮后缓和的回到顶部的代码, 而不是直接回到顶部, 做了一个动画效果。.medusa { position: fixed; right: 1%; bottom: 5%; width: 50px; border: 1px solid #cdcccc; background-color: white; font-size: 20px; z-index: 1040; -webkit-backface-visibility: hidden;}.medusa > div > a > img { width: 30px; height: 30px;}.medusa > div { margin: 5px 0 5px 9px;}.medusa > div > a { padding: 0 0 7px 0;}.medusa > div > a:hover { border-top: 2px solid #00a8e8; border-bottom: 2px solid #e80000;}关键词：
