如今，網(wǎng)頁設(shè)計(jì)越發(fā)重視用戶體驗(yàn)。一種極富人性化的設(shè)計(jì)是點(diǎn)擊照片即可放大旋轉(zhuǎn)。以下是HTML代碼示例：
<img src="圖片路徑" onclick="enlarge(this)" style="cursor:pointer">
<script>
function enlarge(img) {
let modal = document.createElement('div');
modal.style.position = "fixed";
modal.style.zIndex = "1";
modal.style.height = "100%";
modal.style.width = "100%";
modal.style.overflow = "auto";
modal.style.backgroundColor = "rgba(0,0,0,0.5)";
modal.addEventListener('click', function() {
modal.style.display = "none";
});
let modalImg = document.createElement('img');
modalImg.style.display = "block";
modalImg.style.margin = "auto";
modalImg.style.maxHeight = "90%";
modalImg.style.maxWidth = "90%";
modalImg.src = img.src;
modalImg.addEventListener('click', function() {
let deg = (parseInt(modalImg.style.transform.slice(7))) ? parseInt(modalImg.style.transform.slice(7)) : 0;
deg += 90;
modalImg.style.transform = "rotate(" + deg + "deg)";
});
modal.appendChild(modalImg);
document.body.appendChild(modal);
}
</script>上述代碼中創(chuàng)建了一個(gè)
元素，通過設(shè)置定位，使其遮蓋整個(gè)窗口，并設(shè)置半透明的黑色背景色。然后，在這個(gè)
元素中創(chuàng)建一個(gè)![]()
元素代表放大的圖片。當(dāng)用戶點(diǎn)擊該圖片時(shí)，先檢查該圖片是否已經(jīng)被旋轉(zhuǎn)，如已被旋轉(zhuǎn)，則在原來的基礎(chǔ)上再旋轉(zhuǎn)90度。最后，將該![]()
元素放置于創(chuàng)建的
元素中，呈現(xiàn)一個(gè)漂亮的放大旋轉(zhuǎn)效果。