jQuery - 图片缩放效果（模拟浏览器调整大小）

Question

可以使用jQuery + background-position动画来实现类似缩放图片的效果吗？

例如这样的效果：http://www.sohtanaka.com/web-design/examples/image-zoom/ 我的意思是，不要通过改变图片大小（因为浏览器会让图片失真），而是通过在链接上设置背景图像，并通过动画设置链接的位置和大小来实现动画效果。

编辑：

一种想法是使用两个图像。例如：

- 两个重叠的图像，一个200 x 200像素，另一个400 x 400像素 - 只有第一个图像可见，第二个图像被隐藏在第一个图像后面，并且被调整大小为200 x 200 - 当用户将鼠标悬停在上面时，第一个图像会同时放大到400 x 400并逐渐消失 - 第二个图像同时淡入并放大到其原始大小（400 x 400）

这可以使用jQuery实现吗？如何实现？

- Alex

---

即使是背景，它仍然是一张图片，因此仍然受浏览器调整图像大小的影响。 - DA.

那么也许可以以某种方式给访问者一种缩放的印象？就像视觉错觉一样？ :) - Alex

我可能误解了你的意思。你是说图像尺寸将保持不变，但你会增加包含它的元素的大小吗？（因此图像大小不会改变，但由于其容器更大，您将看到更多的内容。）如果是这样，您肯定可以这样做。 - DA.

你是指像放大镜一样的效果吗？http://css-tricks.com/examples/AnythingZoomer/ - Mottie

Answer 1

CSS

#div{
    background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
    background-size: 10%;
    height: 490px;
    width: 490px;
}

JS

$('#div').hover(function (){
    $(this).animate({
        'background-size': '50%'
    })
}, function (){
    $(this).animate({
        'background-size': '10%'
    })
})

HTML

 <div id="div"></div>

在 JSFIDDLE 上：

描述：仅适用于最新版本的Chrome浏览器。

参考：如何使用CSS设置背景图片大小？

- S L

---

OP不想要缩放。而且这也不是跨浏览器的。 - Pinkie

@Pinkie，我想能否使用jQuery + background-position动画来重现缩放图像的效果？的意思是将图像作为背景进行缩放，而不是使用<img>标签。当然，这是CSS3的特性，难怪许多浏览器不支持它。 - S L

Answer 2

你是指像这样吗？

$('div').hover(function() {
    $(this).animate({
        width: 400,
        height: 400
    })
}, function() {
    $(this).animate({
        width: 200,
        height: 200
    })
})

请查看工作示例http://jsfiddle.net/vm4wQ/

- Hussein