a corner pop script
目前为
此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/457199/1132218/download%20corner%20pop.js
/* eslint-disable no-multi-spaces */
/* eslint-disable no-sequences */
/* eslint-disable no-return-assign */
// ==UserScript==
// @name download corner pop
// @namespace MFM3Code
// @version 0.1.1
// @description a corner pop script
// @author PY-DNG
// @license GPL-v3
// @match NONE
// @grant none
// ==/UserScript==
! function(a) {
window.pop = a();
}(function() {
document.head.appendChild(makeElm('<style>#pop-container{position:fixed;right:20px;bottom:20px;z-index:9999}.with-play-bar #pop-container{bottom:100px}[class*=pop-]{position:relative;display:flex;overflow:hidden;margin-top:10px;width:300px;max-width:calc(100vw - 40px);border-radius:8px;box-shadow:0 4px 16px -1px rgba(18,22,33,.3);align-items:center;word-break:break-all;user-select:none}[class*=pop-] .progress{position:absolute;bottom:0;left:0;height:4px;background:#99a3ba;opacity:0;transition:opacity 1s}.pop-info{padding:20px 20px;background:#2e77d0}.pop-info .text span{color:#fff;font-size:16px}.pop-info .icon svg{fill:#fff}.pop-download{padding:32px 20px;background:#fff}.pop-download .percent{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#f5f9ff;transition:background .6s ease,transform .16s ease;transform:scaleX(0);transform-origin:0 50%}.pop-download .percent span{position:absolute;right:0;bottom:19px;display:block;width:100%;height:2px;opacity:0;transition:transform .8s ease;transform:translateY(.5px)}.pop-download .percent span::after,.pop-download .percent span::before{position:absolute;top:0;height:2px;border-radius:1px;background:#5628ee;content:"";transition:background .8s ease,transform .8s ease,height .3s ease;transform:rotate(var(--r)) scaleY(var(--s));--r:0;--s:0.5}.pop-download .percent span::before{right:0;width:64%;transform-origin:0 50%}.pop-download .percent span::after{left:0;width:38%;transform-origin:100% 50%}.pop-download .percent div{position:absolute;bottom:8px;left:0;width:300%;transition:transform 1s ease;transform:translateX(var(--x));--x:0}.pop-download .percent svg{display:block;width:100%;height:12px;color:#5628ee;transition:color .5s ease;stroke-width:1.2px}.pop-download.finished .percent{background:#fff}.pop-download.finished .percent span{width:20px;opacity:1;transform:translate(-20px,-19px)}.pop-download.finished .percent span::after,.pop-download.finished .percent span::before{background:#99a3ba;transition:background .6s ease,transform .6s ease .45s;--s:1;animation:check .4s linear forwards .6s}.pop-download.finished .percent span::before{--r:-50deg}.pop-download.finished .percent span::after{--r:38deg}.pop-download.finished .percent svg{opacity:0}.pop-download.finished .text{--y:0}.pop-download.finished .text>div{opacity:0}.pop-download .text{position:relative;z-index:1;width:calc(100% - 40px);transition:transform .6s ease;transform:translateY(var(--y));--y:-18px}.pop-download .text strong{display:block;overflow:hidden;color:#3f4656;text-overflow:ellipsis;white-space:nowrap;font-weight:400;font-size:14px}.pop-download .text>div{position:absolute;top:100%;left:0;display:flex;line-height:20px;transition:opacity .4s ease;transform:translateY(6px);align-items:center}.pop-download .text>div small{display:inline-block;color:#99a3ba;vertical-align:top;white-space:nowrap;font-size:12px}.pop-download .text>div>small{width:30px;text-align:center}.pop-download .text>div div{position:relative;display:inline-block;margin-left:8px;vertical-align:top}.pop-download .text>div div::before{display:inline-block;margin-top:9px;width:2px;height:2px;border-radius:50%;background:#99a3ba;content:"";vertical-align:top}.pop-download .text>div div small{position:absolute;top:0;left:8px}[class*=pop-] .icon{position:relative;z-index:1;display:flex;margin-left:auto;padding-left:10px;transition:opacity .4s ease;align-items:center}[class*=pop-] .icon>div{display:flex;margin:0;padding:0;list-style:none}.pop-download.finished .icon{opacity:0}[class*=pop-] .icon svg{width:20px;height:20px}</style>'));
return function() {
function b(a, b) {
var c = makeElm('<div class="pop-info" style="display:none"><div class="text"><span data-text></span></div><div class="icon"><div><svg viewBox="0 0 1024 1024"><path d="M512 14.208c274.56 0 497.792 223.168 497.792 497.792 0 274.56-223.168 497.792-497.792 497.792C237.44 1009.792 14.208 786.56 14.208 512 14.208 237.44 237.44 14.208 512 14.208z m0 71.104A427.072 427.072 0 0 0 85.312 512 427.072 427.072 0 0 0 512 938.688 427.072 427.072 0 0 0 938.688 512 427.072 427.072 0 0 0 512 85.312z m35.584 628.16v71.104H476.416v-71.04h71.168z m0-474.048v402.944H476.416V239.424h71.168z"></path></svg></div></div><div class="progress"></div>');
return 0 === $All("#pop-container").length && $("body").appendChild(makeElm('<div id="pop-container"></div>')),
$("#pop-container").insertAdjacentElement('afterbegin', c),
[...$All(c, "span[data-text]")].forEach(elm => elm.innerHTML = a),
0 !== b && (c.addEventListener('click', function() {
h(c);
}),
h(c, b || 3e3)),
fadeIn(c, 500),
c
}
function c(a) {
var b = makeElm('<div class="pop-download" style="display:none;"><div class="text"><strong><span data-text></span></strong><div><small>%</small><div><small>0 B / 0 B</small></div></div></div><div class="icon"><div><svg viewBox="0 0 1024 1024"><path d="M867.3 342.8L539.5 670.7V79.4c0-15.2-12.3-27.5-27.5-27.5s-27.5 12.3-27.5 27.5v591.3L156.7 342.8c-5.4-5.4-12.4-8-19.4-8-7 0-14.1 2.7-19.4 8-10.7 10.7-10.7 28.1 0 38.8l374.7 374.7c10.7 10.7 28.1 10.7 38.8 0l374.7-374.7c10.7-10.7 10.7-28.1 0-38.8-10.7-10.7-28.1-10.7-38.8 0z m129.2 574.4h-969C12.3 917.2 0 929.5 0 944.6c0 15.2 12.3 27.5 27.5 27.5h969.1c15.2 0 27.5-12.3 27.5-27.5-0.1-15.1-12.4-27.4-27.6-27.4z"></path></svg></div></div><div class="percent"><span></span><div><svg preserveaspectratio="none" viewbox="0 0 600 12"><path d="M0,1 L200,1 C300,1 300,11 400,11 L600,11" fill="none" stroke="currentColor"></path></svg></div></div><div class="progress"></div></div>');
return 0 === $All("#pop-container").length && $("body").appendChild(makeElm('<div id="pop-container"></div>')),
$("#pop-container").insertAdjacentElement('afterbegin', b),
[...$All(b, "span[data-text]")].forEach(elm => elm.innerHTML = a),
fadeIn(b, 500),
b
}
function d(a) {
a.classList.add("finished");
}
function e(a, b) {
$All(a, "small")[1].innerHTML = b;
}
function f(a, b) {
[...$All(a, "span[data-text]")].forEach(elm => elm.innerHTML = b);
}
function g(a, b) {
$All(a, "small")[0].innerHTML = b + "%";
[...$All(a, ".percent")].forEach(elm => elm.style.transform = "scaleX(" + b / 100 + ")");
}
function h(a, b) {
var c, d, e;
b ? (c = new Date,
d = [...$All(a, ".progress")],
d.forEach(elm => {elm.style.width = "100%"; elm.style.opacity = "1"}),
e = setInterval(function() {
var f = 100 * ((new Date - c) / b) >> 0;
d.forEach(elm => elm.style.width = 100 - f + "%");
new Date - c >= b && (clearTimeout(e),
fadeOut(a, 500, function() {
a.remove();
}))
}, 10)) : fadeOut(a, 500, function() {
a.remove();
})
}
var a = {
info: b,
download: c,
finished: d,
size: e,
text: f,
percent: g,
close: h
};
return a;
}();
// Basic functions
// querySelector
function $() {
switch(arguments.length) {
case 2:
return arguments[0].querySelector(arguments[1]);
break;
default:
return document.querySelector(arguments[0]);
}
}
// querySelectorAll
function $All() {
switch(arguments.length) {
case 2:
return arguments[0].querySelectorAll(arguments[1]);
break;
default:
return document.querySelectorAll(arguments[0]);
}
}
// createElement
function $CrE() {
switch(arguments.length) {
case 2:
return arguments[0].createElement(arguments[1]);
break;
default:
return document.createElement(arguments[0]);
}
}
function makeElm(html) {
const container = $CrE('div');
container.innerHTML = html;
return container.children[0];
}
function fadeIn(elm, time, callback) {
elm.style.display = '';
elm.style.opacity = '0';
elm.style.transitionDuration = time.toString() + 'ms';
elm.style.opacity = '1';
setTimeout(e => {
elm.style.opacity = '';
typeof callback === 'function' && callback();
}, time);
}
function fadeOut(elm, time, callback) {
elm.style.display = '';
elm.style.opacity = '1';
elm.style.transitionDuration = time.toString() + 'ms';
elm.style.opacity = '0';
setTimeout(e => {
elm.style.display = 'none';
typeof callback === 'function' && callback();
}, time);
}
});
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址