在 HTML 中,我們可以通過設置屬性來實現雙擊圖片放大的功能。
<img src="example.jpg" ondblclick="zoom(this);"> <script> function zoom(img) { // 獲取圖片原始大小 var originalWidth = img.naturalWidth; var originalHeight = img.naturalHeight; // 計算放大后的寬高 var newWidth = originalWidth * 2; var newHeight = originalHeight * 2; // 設置新的寬高 img.style.width = newWidth + "px"; img.style.height = newHeight + "px"; } </script>
在上面的代碼中,我們首先在 img 標簽上添加 ondblclick 屬性,并指定一個函數 zoom。當用戶雙擊圖片時,該函數將被調用。
在 zoom 函數中,我們首先獲取圖片的原始大小,然后計算出雙倍寬高。最后,我們將新的寬高設置為 img 對象的樣式屬性,圖片就完成了放大的操作。
以上就是如何使用 HTML 和 JavaScript 來設置雙擊圖片放大的方法。通過這種方式,我們可以讓用戶更加方便地查看圖片內容,提升用戶體驗。