javascript - 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 实现吗？如何实现？

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?