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

发布于 2024-10-29 21:29:54 字数 577 浏览 6 评论 0原文

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

像这样的东西: http://www.sohtanaka.com/web-design/ example/image-zoom/

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

编辑:

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

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

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

Can a zoom image like effect be reproduced with jQuery + background-position animation?

something like this: http://www.sohtanaka.com/web-design/examples/image-zoom/

I mean, instead of animating image size (which sucks because browsers resize images horribly) - do a animation by setting a background image on a link, and animate the position and size of the link.

edit:

A idea is to use two images. For example:

  • two overlapped images, one 200 x 200 pixels, the other 400 x 400 pixels
  • only the 1st image is visible, the 2nd image is hidden behind the 1st, and resized to 200 x 200
  • the user hovers over it, then the first image enlarges to 400 x 400 and fades out simultaneously
  • the second image fades in and enlarged simultaneously to its original size (400 x 400)

Could this be achieved with jquery and how?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

红颜悴 2024-11-05 21:29:54

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

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>

On JSFIDDLE

DESCRIPTION: works only on latest chrome

REFERENCE: Set size on background image with CSS?

纵山崖 2024-11-05 21:29:54

你的意思是这样

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

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

You mean like this

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

Check working example at http://jsfiddle.net/vm4wQ/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文