height 150pxborder #FFF solid 1pxmargin 15px autooverflow hidden *有無(wú)這句區(qū)別很大，就是不受方框限制* aaa img cursor pointertransition all 04s *越小越快* aaa imghover transform scale3 *鼠標(biāo)經(jīng)過(guò)時(shí)候圖片放大多少；假設(shè)圖片外層DIV的class為pic，圖片的大小是400*300，html代碼可以寫(xiě)成下面這樣ltdiv class=quotpicquot ltimg src=quotabcjpgquot width=quot400quot height=quot300quot ltdiv 如果希望鼠標(biāo)經(jīng)過(guò)時(shí)圖片的尺寸變成600*450，那么在css里面只要這樣定義就行了pic imghoverwidth600pxheight450px 這個(gè)代碼在。

2將圖片放大的容器設(shè)置為可以移動(dòng)，這樣可以讓容器隨著鼠標(biāo)移動(dòng)而移動(dòng)，從而將其他圖片擋住的情況防止3給圖片放大容器添加zindex，使其在其他頁(yè)面元素之上，從而可以覆蓋其他圖片4使用css設(shè)置一個(gè)懸停后改變圖片大小的動(dòng)態(tài)效果，直接將圖片變大，從而不會(huì)有其他圖片的阻擋5使用CSS3的transform；1新建html文檔，在body標(biāo)簽中添加圖片標(biāo)簽，為這個(gè)標(biāo)簽設(shè)置“id”屬性，然后設(shè)置圖片的默認(rèn)顯示大小css屬性2添加“onmouseover”js事件，首先使用“documentgetElementById”獲取到圖片標(biāo)簽，然后定義鼠標(biāo)移動(dòng)到圖片上時(shí)發(fā)生的事件，這時(shí)圖片將會(huì)放大3添加“onmouseout”js事件，首先獲取圖片標(biāo)簽，然后。

用js，先是一個(gè)小圖片縮略圖，onMouseOver時(shí)觸發(fā)js寫(xiě)的Function，當(dāng)然Function中是處理方法這只是簡(jiǎn)單思路，至于怎么寫(xiě)網(wǎng)上有很多類似的代碼可以供你copy了，自己找找；源碼如下 lt！DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot lttitleCSS3鼠標(biāo)滑過(guò)圖片放大特效DEMO演示lttitle ltstyle htmlfontfamilysansserifmstextsizeadjust100%webkittextsizeadjust100%bodymargin0article，aside，details，figcaption，figure。

一通過(guò)css樣式中的 quothoverquot實(shí)現(xiàn)，代碼如下 lt！DOCTYPE htmllthtml lang=quotenquotltheadltmeta charset=quotUTF8quotlttitleDocumentlttitleltstyledivbackgroundredwidth200pxheight200pxdivhoverbackgroundredwidth500pxheight500pxltstyleltheadltbodyltdiv變大ltdivlt。

女人耳朵有三顆連成直線的痣

lt！DOCTYPE htmlltheadltscriptwindowonload = function var img = documentgetElementByIdquotimgTestquot if documentaddEventListener imgaddEventListenerquotmouseoverquot，doMouseover，false imgaddEventListenerquotmouseoutquot，doMouseout，false else ifdocumentattachEvent img。

gallery img width 250pxtransition 1s transformtransform translateZ0 galleryhover img transform scale15， 15transition 3s transform。

做好是給圖片加以個(gè)lta標(biāo)簽，然后對(duì)lta標(biāo)簽設(shè)置hover 例如一個(gè)圖片ltimg src=#39examplejpg#39 width=#39100#39 height=#39100#39 alt=#39舉例#39 移上去的圖片叫hoverjpg 兩個(gè)圖片大小一樣 改寫(xiě)成 lta href=#39javascript#39 id=#39example#39lta 再在css中添加 example backgroundurl#39examplejpg#39。

lta href=quotlt%#DataBinderEvalContainerDataItem，quotimageBigUrlquot %quot class=quottooltipquot 大圖片提示 ltaspImageButton ID=quotimage1quot runat=quotserverquot ImageUrl=#39lt%#DataBinderEvalContainerDataItem，quotimageSmallUrlquot %#39 Width=quot50pxquot Height=quot50pxquot lta。

5 ns可以縮小到01，放大到5倍 計(jì)算位置，以鼠標(biāo)所在位置為中心 以每個(gè)點(diǎn)的xy位置，計(jì)算其相對(duì)于圖片的位置，再計(jì)算其相對(duì)放大后的圖片的位置 bgX = bgXxbgX*nsscaleSizescaleSize bgY = bgYybgY*nsscaleSizescaleSize scaleSize。

定位層級(jí)太低的原因，給導(dǎo)航加一個(gè)z再測(cè)試下 數(shù)值越大，越排在上面。

html鼠標(biāo)放在圖片上圖片變大

attr#39src#39，Src#39tab#39find#39img#39mouseoverfunction var inx = $thisindexvar Imgsrc = $#39tab#39find#39img#39eqinxattr#39src#39#39show#39find#39img#39attr#39src#39，Imgsrcltscript lthtml 引一個(gè)jquery文件，圖片地址替換一下就可以了。

1新建html文檔2在head里插入鏈接和圖片樣式，表示鼠標(biāo)經(jīng)過(guò)時(shí)圖片放大，代碼如下ltstyle type=quottextcssquot a #bigwidth800pxheight480px a #bighover width1200pxheight720px ltstyle 3在body里插入lta href=quot#quotltimg id=quotbigquot src=quotimagesdonejpgquot lta，表。

html鼠標(biāo)放上逐漸變大拿走變小原理如下1當(dāng)鼠標(biāo)移到圖片上，圖片變大當(dāng)鼠標(biāo)移出圖片，圖片變小2鼠標(biāo)over時(shí)，設(shè)置一個(gè)定時(shí)器，讓圖片逐漸變大，鼠標(biāo)out時(shí)同理。