JavaScript實現圖片放大預覽效果
代碼實現：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> .preview-img { position: relative; height: 398px; }.mask { display: none; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: skyblue; opacity: .4; border: 1px solid #ccc; cursor: move; }.big { overflow: hidden; display: none; position: absolute; top: 0; left: 410px; width: 500px; height: 500px; background-color: pink; z-index: 99; border: 1px solid #ccc; }.big img { position: absolute; top: 0; left: 0; } </style></head><body> <script> window.addEventListener(’load’, function() { var preview_img = document.querySelector(’.preview-img’); var mask = document.querySelector(’.mask’); var big = document.querySelector(’.big’); // 顯示與隱藏 preview_img.addEventListener(’mouseover’, function() {mask.style.display = ’block’;big.style.display = ’block’; }); preview_img.addEventListener(’mouseout’, function() {mask.style.display = ’none’;big.style.display = ’none’; }); // 盒子跟隨鼠標移動 preview_img.addEventListener(’mousemove’, function(e) {var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;var maskMax = preview_img.offsetHeight - mask.offsetHeight;if (maskX <= 0) { maskX = 0;} else if (maskX >= maskMax) { maskX = maskMax;}if (maskY <= 0) { maskY = 0;} else if (maskY >= maskMax) { maskY = maskMax;}mask.style.left = maskX + ’px’;mask.style.top = maskY + ’px’;// 大圖，根據比例計算坐標var bigImg = document.querySelector(’.bigImg’);var bigMax = bigImg.offsetWidth - big.offsetWidth;var bigX = bigMax * maskX / maskMax;var bigY = bigMax * maskY / maskMax;bigImg.style.left = -bigX + ’px’;bigImg.style.top = -bigY + ’px’; }); }); </script> <div class='preview-img'> <img src='https://s1.ax1x.com/2020/10/12/027yRg.jpg' alt=''> <div class='mask'></div> <div class='big'> <img src='https://s1.ax1x.com/2020/10/12/0276zQ.jpg' alt='' class='bigImg'> </div> </div></body></html>
實現效果：
以上就是JavaScript實現圖片放大預覽效果的詳細內容，更多關于JavaScript 圖片放大的資料請關注好吧啦網其它相關文章！
相關文章：
1. React+umi+typeScript創建項目的過程2. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析3. SharePoint Server 2019新特性介紹4. ASP中常用的22個FSO文件操作函數整理5. 三個不常見的 HTML5 實用新特性簡介6. ASP調用WebService轉化成JSON數據，附json.min.asp7. .Net core 的熱插拔機制的深入探索及卸載問題求救指南8. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁9. 讀大數據量的XML文件的讀取問題10. 解決ASP中http狀態跳轉返回錯誤頁的問題
網公網安備