mac停靠欄
阿新 • • 發佈：2021-11-29
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } img { border-radius: 20px; margin: 10px; } .wrap { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; } </style> </head> <body> <div class="wrap"> <img id="img1" src="../images/1.jpg" width="100" alt=""> <img id="img2" src="../images/2.jpg" width="100" alt=""> <img id="img3" src="../images/3.jpg" width="100" alt=""> <img id="img4" src="../images/4.jpg" width="100" alt=""> <img id="img5" src="../images/5.jpg" width="100" alt=""> <img id="img6" src="../images/6.jpg" width="100" alt=""> </div> <script> window.onload = function () { const imgs = document.querySelectorAll("img") window.addEventListener('mousemove', event => { const r = 300 const x = event.clientX const y = event.clientY imgs.forEach(item => { let temp = item.getBoundingClientRect() let l = temp.width / 2 + temp.left - x let w = temp.height / 2 + temp.top - y let hypotenuse = Math.sqrt(l * l + w * w) if (hypotenuse >= r) { hypotenuse = r } item.style.width = 160 - hypotenuse * 0.2 + 'px' }) }) } </script> </body> </html>