【JS】侧边菜单

梦汐

[Asm] 纯文本查看 复制代码

html = `<div class="paly-list"
style="position: fixed;height:100%;width: 371px;background-color: #ffffff00;z-index: 9999;left: -361px;"
status="hide">
<div class="paly-client-area" style="position: absolute;height:100%;width: 360px;background-color: #ffffff;">

</div>
<div class="show" style="position: absolute;height: 32px;width: 10px;right: 0px;background-color: rgb(255, 255, 255);bottom: 10px;opacity: 1.1;display: block;box-Shadow: 0px 0PX 5px rgb(0 0 0 / 50%);">
</div>
</div>`
const temp = document.createElement('template');
temp.innerHTML = html.trim();
document.body.prepend(temp.content.firstChild);

document.querySelector(".show").onclick = function () {
    var status = document.querySelector(".paly-list").getAttribute('status')
    if (status == "hide") {
        paly_list_show()
    }
}
document.querySelector(".paly-list").addEventListener('contextmenu', function (event) {
    event.preventDefault(); //取消默认的右键菜单
    var status = document.querySelector(".paly-list").getAttribute('status')
    if (status == "show") {
        paly_list_hide()
    }
});

function paly_list_show() {
    var div = document.querySelector(".paly-list");
    div.style.transition = "transform 0.5s ease-out";
    div.style.transform = "translateX(+361px)";
    div.setAttribute('status', "show")

    var client = document.querySelector(".paly-client-area")
    client.style.boxShadow = "5px 0 10px rgb(0 0 0 / 10%)"

    fadeOut(document.querySelector(".show"))
    function fadeOut(element) {
        let op = 1;  // 将不透明度设置为 1
        element.style.opacity = op;
        let timer = setInterval(function () {
            if (op <= 0) {
                clearInterval(timer);
                element.style.display = "none";  // 隐藏元素
            }
            element.style.opacity = op;
            op -= 0.2;  // 每次减少不透明度 0.1
        }, 50);  // 每隔 50 毫秒执行一次
    }
}
function paly_list_hide() {
    var div = document.querySelector(".paly-list");
    div.style.transition = "transform 0.5s ease-out";
    div.style.transform = "translateX(0px)";
    div.setAttribute('status', "hide")

    fadeIn(document.querySelector(".show"))

    function fadeIn(element) {
        let op = 0;  // 将不透明度设置为 0
        element.style.opacity = op;
        element.style.display = "block";
        let timer = setInterval(function () {
            if (op >= 1) {
                var client = document.querySelector(".paly-client-area")
                client.style.boxShadow = "none"
                clearInterval(timer);
            }
            element.style.opacity = op;
            op += 0.2;  // 每次增加不透明度 0.1
        }, 50);  // 每隔 50 毫秒执行一次
    }
}