用JavaScript實(shí)現(xiàn)圖片點(diǎn)擊放大再次點(diǎn)擊恢復(fù)代碼如下知識(shí)拓展JavaScript 是目前所有主流瀏覽器上唯一支持的腳本語言，這也是早期JavaScript的唯一用途其主要作用是在不與服務(wù)器交互的情況下修改HTML頁面內(nèi)容，因此其最關(guān)鍵的部分是DOM文檔對(duì)象模型，也就是HTML元素的結(jié)構(gòu)通過Ajax可以使HTML頁面通過JavaScr。

第一種方法將三張大圖放在div里面，這三個(gè)div大小還有別的屬性都一樣，但是默認(rèn)是隱藏的，display隱藏 displayblock顯示 然后點(diǎn)擊一張圖片，對(duì)應(yīng)的大圖div顯示出來，點(diǎn)擊第二張，第一個(gè)大圖div隱藏，第二個(gè)大圖div顯示第二種方法，只有一個(gè)大的div，里面放標(biāo)簽，但是src也就是路徑是。

這個(gè)是隨鼠標(biāo)移動(dòng)查看放大圖片響應(yīng)的是onmousemove事件 你可以改下 第二種方法可自定義CSS樣式，控制jQuery插件jQuery Image Flyout提示小圖片顯示效果代碼 一，包含文件 二，HTML部分DIV層內(nèi)所用圖片鏈接jQuery插件flyout彈出圖片 三。

圖片按比例縮放 function DrawImageImg，WIDTH，HEIGHT var image=new Imageimagesrc=Imgsrcwidth=WIDTH預(yù)先設(shè)置的所期望的寬的值 height=HEIGHT預(yù)先設(shè)置的所期望的高的值 ifimagewidthwidthimageheightheight現(xiàn)有圖片只有寬或高超了預(yù)設(shè)值就進(jìn)行js控制 w=imagewidth。

1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的標(biāo)簽中，輸入css代碼div width 72pxheight 72pxbackground urlsmall3png norepeatoverflow hidden 3瀏覽器運(yùn)行indexhtml頁面，此時(shí)成功將矩形圖片只顯示了正方形部分4點(diǎn)擊小圖后，成功顯示。

具體來說，我們首先需要一個(gè)背景圖片作為展示的大圖，再用一個(gè)小的透明方塊來模擬鼠標(biāo)拖拽的滑塊，并通過JavaScript來控制這個(gè)小方塊的位置當(dāng)用戶點(diǎn)擊并拖動(dòng)這個(gè)小方塊時(shí)，大圖的局部會(huì)被放大顯示在另一個(gè)小方塊上下面是具體的實(shí)現(xiàn)代碼首先，我們定義一個(gè)包含大圖的盒子，設(shè)置背景圖片及其尺寸然后，創(chuàng)建。

1你可以用JS改變那張圖片的SRC路徑如documentgetelementbyidquotidquotsrc=quotquot當(dāng)然路徑里可以帶上圖看的高和寬這樣來改變你的圖片2就是像你說的，可以Display，來顯示和隱藏3也可以是一個(gè)彈出層里面引用的一張較大的圖片，這個(gè)代碼有點(diǎn)多如果需要可以發(fā)MAIL我haven@a。

用js，先是一個(gè)小圖片縮略圖，onMouseOver時(shí)觸發(fā)js寫的Function，當(dāng)然Function中是處理方法這只是簡單思路，至于怎么寫網(wǎng)上有很多類似的代碼可以供你copy了，自己找找。