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

【问题标题】：jQuery - zoom image effect (emulate browser resize)jQuery - 缩放图像效果（模拟浏览器调整大小）
【发布时间】：2011-04-05 04:13:25
【问题描述】：

jQuery + background-position 动画可以重现类似缩放图像的效果吗？

类似这样的：http://www.sohtanaka.com/web-design/examples/image-zoom/

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

编辑：

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

两张重叠的图片，一张 200 x 200 像素，另一张 400 x 400 像素
只有第 1 张图片可见，第 2 张图片隐藏在第 1 张之后，并调整为 200 x 200
用户将鼠标悬停在它上面，然后第一张图片放大到 400 x 400 并同时淡出
第二张图像淡入并同时放大到其原始尺寸 (400 x 400)

这可以用 jquery 实现吗？如何实现？

【问题讨论】：

即使是背景，它仍然是图像，因此仍然受制于浏览器调整图像大小的能力。
那么也许会以某种方式给访问者缩放的印象？像视觉错觉？ :)
我可能误解了你。您是说图像将保持相同的尺寸，但您会增加包含它的元素的大小？（所以图像不会改变大小，但你会看到更多，因为它的容器更大。）如果是这样，你当然可以这样做。
你的意思是像放大镜吗？ css-tricks.com/examples/AnythingZoomer

标签： javascript jquery animation css jquery-effects

【解决方案1】：

CSS

#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%'
    })
})

HTML

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

开启JSFIDDLE

描述：仅适用于最新的 chrome

参考：Set size on background image with CSS?

【讨论】：

OP 不想缩放。这也不是跨浏览器。
@Pinkie 我想Can a zoom image like effect be reproduced with jQuery + background-position animation? 表示将图像缩放为背景而不是<img>。当然，它的CSS3 功能，难怪很多浏览器都不支持它。

【解决方案2】：

你的意思是这样的

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

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

【讨论】：