jQuery - 缩放图像效果(模拟浏览器调整大小)
可以使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
CSS
JS
HTML
JSFIDDLE
描述:仅适用于最新的 chrome
参考: 使用 CSS 设置背景图像的大小?
CSS
JS
HTML
On JSFIDDLE
DESCRIPTION: works only on latest chrome
REFERENCE: Set size on background image with CSS?
你的意思是这样
检查工作示例 http://jsfiddle.net/vm4wQ/
You mean like this
Check working example at http://jsfiddle.net/vm4wQ/