HTML 浮窗代码

最近在设计并撰写自己定义的第一个小项目, 其中在开发中需要使用到一个漂浮窗口的功能, 使用 javascript 撰写的, 先上一下我写好的成品样子：

这个浮窗是在右下角作为其他功能的, 分别是：回到顶部、GitHub 入口、掘金入口三个功能, 所以我把它写在 .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.cn/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 路径作为你自己的值, 第二部分是因为我在使用图片路径时遇到的解析问题, 所以第二个函数部分是判断图片路径是否存在, 否则使用 ../ 的方式追加到父级目录上, 第三部分则是使用回到顶部的按钮后缓和的回到顶部的代码, 而不是直接回到顶部, 做了一个动画效果。

下面是需要用到的 CSS 样式代码块。

.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;
}

图片资源

长时间没有更新了，加油~