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

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

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

一通過css樣式中的 quothoverquot實現(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。

做好是給圖片加以個lta標簽，然后對lta標簽設(shè)置hover 例如一個圖片ltimg src=#39examplejpg#39 width=#39100#39 height=#39100#39 alt=#39舉例#39 移上去的圖片叫hoverjpg 兩個圖片大小一樣 改寫成 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倍 計算位置，以鼠標所在位置為中心 以每個點的xy位置，計算其相對于圖片的位置，再計算其相對放大后的圖片的位置 bgX = bgXxbgX*nsscaleSizescaleSize bgY = bgYybgY*nsscaleSizescaleSize scaleSize。

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

html鼠標放在圖片上圖片變大

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 引一個jquery文件，圖片地址替換一下就可以了。

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

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