const confirm = document.querySelector('.Confirm'); const boi = document.querySelector('.Boi'); const btnDelete = document.querySelector('.Confirm-Body-Button_Delete'); const btnCancel = document.querySelector('.Confirm-Body-Button_Cancel'); const current = { happiness: 0.9, derp: 1, px: 0.5, py: 0.5 }; const target = { ...current }; confirm.addEventListener('mousemove', onMouseMove); confirm.addEventListener('mouseleave', onMouseLeave); function onMouseMove({ clientX: x, clientY: y }) { let dx1 = x - btnDelete.getBoundingClientRect().x - btnDelete.getBoundingClientRect().width * 0.5; let dy1 = y - btnDelete.getBoundingClientRect().y - btnDelete.getBoundingClientRect().height * 0.5; let dx2 = x - btnCancel.getBoundingClientRect().x - btnCancel.getBoundingClientRect().width * 0.5; let dy2 = y - btnCancel.getBoundingClientRect().y - btnCancel.getBoundingClientRect().height * 0.5; let px = (x - confirm.getBoundingClientRect().x) / confirm.getBoundingClientRect().width; let py = (y - confirm.getBoundingClientRect().y) / confirm.getBoundingClientRect().height; let distDelete = Math.sqrt(dx1 * dx1 + dy1 * dy1); let distCancel = Math.sqrt(dx2 * dx2 + dy2 * dy2); let happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75); target.happiness = happiness; target.derp = 0; target.px = px; target.py = py; } function onMouseLeave() { target.happiness = 0.9; target.derp = 1; target.px = 0.5; target.py = 0.5; } function update() { for (let prop in target) { if (target[prop] === current[prop]) { continue; } else if (Math.abs(target[prop] - current[prop]) < 0.01) { current[prop] = target[prop]; } else { current[prop] += (target[prop] - current[prop]) * 0.1; } boi.style.setProperty(`--${prop}`, current[prop]); } requestAnimationFrame(update); } update();
总结
以上所述是小编给大家介绍的原生JS与CSS实现软件卸载对话框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: