我有一个相对简单的问题。下面的代码允许我将图像放大 20%,当我将鼠标悬停在它上面时会出现滑动文本。我想做的是扩展代码,这样我就可以访问其他类,这样我就可以使其他照片具有相同的效果。我所有的照片都有不同的尺寸,所以它不像为每张图像添加相同的类那么简单。
<script>
$(document).ready(function() {
//move the image in pixel
var move = -15;
//zoom percentage, 1.2 =120%
var zoom = 1.2;
//On mouse over those thumbnail
$('.zitem').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.zitem').width() * zoom;
height = $('.zitem').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>