3

可以使用 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实现吗？如何实现？

4

2 回答 2

2

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 设置背景图像的大小？

于 2011-04-05T04:47:27.380 回答
1

你的意思是这样

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

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

于 2011-04-05T04:26:40.870 回答