色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery 鼠標移到圖片放大

錢琪琛1年前9瀏覽0評論

jQuery是一種流行的JavaScript庫,通過在網頁中添加jQuery,可以在網頁中實現各種互動效果。一個很受歡迎的效果就是鼠標移到圖片上放大圖片。在下面的代碼中,我將向您展示如何使用jQuery實現這種效果。

$(function(){
var imgWidth = $("img").width();
var imgHeight = $("img").height();
$("img").hover(function(){
$(this).stop().animate({width:imgWidth*1.5,height:imgHeight*1.5,left:"-="+imgWidth*0.25,top:"-="+imgHeight*0.25},500);
},function(){
$(this).stop().animate({width:imgWidth,height:imgHeight,left:"+="+imgWidth*0.25,top:"+="+imgHeight*0.25},500);
});
});

在上面的代碼中,我們為所有的img元素添加了一個hover事件。當鼠標移到圖片上時,我們使用jQuery的animate函數,將圖片的寬度和高度增加50%,將圖片的位置上移和左移25%。當鼠標移出圖片時,我們使用同樣的方式將圖片還原到原始大小和位置。

這就是使用jQuery實現鼠標移到圖片上放大的方法。您可以將這個代碼嵌入到您的網頁中,使您的網頁更加生動有趣。