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

使用jQuery+背景位置动画可以再现类似缩放图像的效果吗

大概是这样的：

我的意思是，不要设置图像大小的动画（这很糟糕，因为浏览器会可怕地调整图像大小），而是通过在链接上设置背景图像来制作动画，并设置链接的位置和大小的动画

编辑：

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

• 两个重叠图像，一个200 x 200像素，另一个400 x 400像素
• 只有第一个图像可见，第二个图像隐藏在第一个图像后面，并调整大小为200 x 200
• 用户将鼠标悬停在它上面，然后第一个图像放大到400 x 400，并同时淡出
• 第二个图像淡入并同时放大到其原始大小（400 x 400）

这可以通过jquery实现吗？如何实现？

您的意思是这样的

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

检查CSS中的工作示例

JS

HTML

在

描述：仅适用于最新的chrome浏览器

---

参考资料：

即使它是一个背景，它仍然是一个图像，因此仍然取决于浏览器调整图像大小的能力。那么，也许会给访问者一种缩放的印象？像是视觉错觉吗？：）我可能误解了你。你是说图像将保持相同的尺寸，但你会增加包含它的元素的大小吗？（所以图像不会改变大小，但你会看到更多，因为它的容器更大。）如果是这样，你肯定可以做到。你是说像放大镜一样吗？OP不想缩放。另外，这不是跨浏览器。@Pinkie嗯，我想

可以用jQuery+背景位置动画再现类似缩放图像的效果吗？

意味着将图像缩放为背景，而不是

。当然，它的

CSS3

功能，难怪很多浏览器不支持它。

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

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

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