在網(wǎng)頁上我們經(jīng)常看到鼠標(biāo)懸停在一個圖片上，這張圖片會慢慢的放大，感覺是像放大鏡放大的效果，當(dāng)鼠標(biāo)移開的時候，圖片有恢復(fù)原來的樣子，今天就實現(xiàn)這種效果。

實現(xiàn)原理以思路：

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

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

3，放大的效果是要用動畫實現(xiàn)的。

代碼：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);

});

});

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。