在網頁上我們經?？吹绞髽藨彝Ｔ谝粋€圖片上，這張圖片會慢慢的放大，感覺是像放大鏡放大的效果，當鼠標移開的時候，圖片有恢復原來的樣子，今天就實現這種效果。

實現原理以思路：

1，首先這是一張圖片在懸停時放大也就是改變大小(寬，高)實現的。

2，一張圖片在放大的時候會根據其定位(如在div里面的圖片會以div的左上角為基準擴大寬和高)來放大的，因此如果我們不去為圖片添加相對定位并且不去調節擴大后的位置，他的放大會是向一邊的，因此我們必須考慮其放大后的位置。

3，放大的效果是要用動畫實現的。

代碼：html>

嘗試

.a1{width:137px;height:138px;border:1px?solid?red;overflow:hidden;position:relative;}

.pic{position:absolute;}

$(function(){

$w?=?$('.pic').width();

$h?=?$('.pic').height();

$w2?=?$w?+?20;

$h2?=?$h?+?20;

$('.pic').hover(function(){

$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);

},function(){

$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);

});

});

總結

以上是生活随笔為你收集整理的html中实现鼠标悬停放大,如何实现鼠标悬停图片放大的效果。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。