Question

我正在尝试缩放悬停图片。问题是...图像被裁剪成div框架，当缩小时，图像不再被裁剪。我希望在这里像这样的脚本： http://papermashup.com/demos/image-jquery/ 但他们没有裁剪图像，有100％x100％

所以...... CSS代码：

span.out {
float:left;
margin:0 10px 0 0;
padding:4px 4px 4px 4px;
border:1px solid #C7C5C8;
clear:left;
}
div.crop {
width: 100px;
height: 100px;
overflow: hidden;
position:relative;
float:left;
}
div.crop img {
height: 100%;
position:absolute;
}

HTML CODE：

<span class="out"><div class="crop"><img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" alt="kitty" /></div></span>

对于jQuery脚本我试试这个：

$(document).ready( function() {
$('.crop img').hover(
function() {
    $(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
    $(this).animate({ 'zoom': 1 }, 400);
});
});

这（取自上面链接中的脚本）：

$(document).ready(function() {
    var zoom = 1.1
          move = 0;
$('.crop').hover(function() {
    width = $('.crop').width() * zoom;
    height = $('.crop').height() * zoom;
    $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
},
function() {
    $(this).find('img').stop(false,true).animate({'width':$('.crop').width(), 'height':$('.crop').height(), 'top':'0', 'left':'0'}, {duration:300});   
});
});

在第一个jQuery代码中，如果我将“.crop img”更改为“.crop”，脚本将div和图像一起缩放...但我只需要缩放图像，div必须保持静止。

DEMO HERE：jsfiddle.net/X6rw7/2/

在第二个jQuery代码中，div是静止的......但是图像没有正确缩放（使用“裁剪”样式）。

DEMO HERE：jsfiddle.net/X6rw7/3/

jQuery裁剪图像悬停缩放

0 个答案: