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

Question

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

类似这样的事：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来实现吗？

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

参考：Set size on background image with CSS?

Answer 2

你的意思是这样的

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

检查http://jsfiddle.net/vm4wQ/

处的工作示例