今天我們介紹一種常見的網(wǎng)頁特效——圖片放大。通過javascript腳本可以很方便地實(shí)現(xiàn)，舉個(gè)例子，當(dāng)用戶在網(wǎng)頁上點(diǎn)擊某個(gè)圖片時(shí)，可以讓該圖片放大，以便于用戶更好地查看細(xì)節(jié)。具體實(shí)現(xiàn)方法有很多，我們接下來通過代碼和實(shí)例來介紹其中一種方法。 首先，我們需要一個(gè)相關(guān)的HTML頁面來測(cè)試我們的腳本。這里我們先放一個(gè)簡(jiǎn)單的html代碼。 ```

點(diǎn)擊圖片可以放大！

``` 在這個(gè)HTML頁面中，我們置入了一張圖片，并設(shè)定其id為“l(fā)argeImg”，同時(shí)還添加了一個(gè)“p”標(biāo)簽，簡(jiǎn)單說明用戶可以通過點(diǎn)擊圖片來放大。同時(shí)我們還引入了一個(gè)名為“enlarge.js”的腳本。 接下來，我們就該來寫這個(gè)腳本了。 ```js window.onload = function () { // 獲取圖片并改變其鼠標(biāo)指針樣式 var img = document.getElementById("largeImg"); img.style.cursor = 'crosshair'; //獲取圖片的原始大小和位置 var W = img.width; var H = img.height; var original_left = img.offsetLeft; var original_top = img.offsetTop; //當(dāng)鼠標(biāo)點(diǎn)擊圖片時(shí)，獲取當(dāng)前位置并創(chuàng)建一個(gè)新的大圖片元素。 img.onclick = function enlarge() { var x = event.clientX; var y = event.clientY; var largeImgUrl = img.src; var largeImg = document.createElement("img"); largeImg.id = "enlargeImg"; largeImg.setAttribute("src", largeImgUrl); largeImg.style.position = "absolute"; largeImg.style.cursor = "move"; largeImg.style.zIndex = 9999; largeImg.style.top = y + 10 + "px";//設(shè)定大圖上離鼠標(biāo)的距離 largeImg.style.left = x + 10 + "px";//設(shè)定大圖左離鼠標(biāo)的距離 largeImg.style.width = W * 1.7 + "px";//設(shè)定大圖寬度 largeImg.style.height = H * 1.7 + "px";//設(shè)定大圖高度 document.body.appendChild(largeImg); //當(dāng)鼠標(biāo)移動(dòng)時(shí)，跟隨鼠標(biāo)一起移動(dòng) largeImg.onmousemove = function move() { var X = event.clientX; var Y = event.clientY; largeImg.style.left = X + 10 + "px"; largeImg.style.top = Y + 10 + "px"; } //當(dāng)鼠標(biāo)松開時(shí)，移除大圖元素 largeImg.onmouseup = function () { document.body.removeChild(largeImg); img.style.position = "static";//為了避免大圖移除時(shí)，留下了img的移動(dòng)結(jié)構(gòu)，需要清除style中的position屬性。 } } } ``` 上面的這段js代碼也很簡(jiǎn)單，我們來仔細(xì)看一下。首先，在頁面加載完成后，我們獲取圖片的元素，并將其鼠標(biāo)指針設(shè)定為畫筆。 然后，我們獲取該圖片的原始大小和位置，并為該圖片添加一個(gè)“onclick”的事件響應(yīng)函數(shù)。 當(dāng)鼠標(biāo)點(diǎn)擊圖片時(shí)，會(huì)觸發(fā)事件響應(yīng)函數(shù)“enlarge()”。在該函數(shù)中，我們首先獲取當(dāng)前的鼠標(biāo)位置，并根據(jù)原始圖片的大小和位置，創(chuàng)建一個(gè)新的“img”元素。這個(gè)元素的內(nèi)容與原先的圖片相同，但其寬度和高度被放大1.7倍。 將新的圖片元素置于頁面上后，我們?yōu)樵撛靥砑右粋€(gè)“onmousemove”事件響應(yīng)函數(shù)，并在該函數(shù)中，讓該元素隨著鼠標(biāo)的移動(dòng)而移動(dòng)。 最后，我們?yōu)樵撛靥砑右粋€(gè)“onmouseup”事件響應(yīng)函數(shù)，在該函數(shù)中，當(dāng)鼠標(biāo)松開時(shí)，移除改大的圖片元素，并清除掉原始圖片的position屬性。 至此，我們的圖片放大功能已經(jīng)完成了。還有什么需要改進(jìn)的地方嗎？當(dāng)然有。比如，用戶可能會(huì)頻繁點(diǎn)擊圖片，而每次都重新創(chuàng)建一個(gè)新的大圖元素，這樣可能會(huì)極大地拖累瀏覽器性能。如果我們能夠保存已經(jīng)創(chuàng)建的大圖元素，并在用戶需要時(shí)直接顯示，而不是重新創(chuàng)建，那將會(huì)大大提升用戶體驗(yàn)。 在此，我們就不再展開了，大家可以自行擴(kuò)展和改進(jìn)這個(gè)javascript腳本，實(shí)現(xiàn)更多的功能和優(yōu)化。