【JS】侧边菜单
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 毫秒执行一次
}
}
页:
[1]