如何在网页图像(Javascript)上模拟放大镜？

Question

Google拥有最酷的效果 - 一旦它成为Pac-man游戏,今天显然是第一届世界博览会成立160周年,Google的徽标就是它的形象.他们还将鼠标变成放大镜,可以扫过图片(金戒指).

我想知道他们是怎么做到的.它显然是Javascript,我查看了页面源代码,但它并不是特别易读(毫不奇怪).

Answer 1

看看他们的源代码,似乎他们正在使用相当基本的技术来实现这一目标.

忽略所有嵌入的俏皮动画GIF,基本上有两个图像 - 大,小整个场景.较大的图像在文档中重复三次.查看下面的带注释的图像,以更好地了解缩放的工作原理.

放大圆内的部分分为三个div - 顶部,中部和底部.应隐藏每个div的溢出.每个div相对定位在缩放圆内.在鼠标移动时,将缩放圆的绝对位置更改为鼠标坐标.他们的示例还使用CSS3进行缩放并添加一些动画延迟.

这是一个最小的重建示例.

另一个例子,我们不隐藏div溢出以将整个事物显示为正方形.

Answer 2

嗯,首先,对于任何想要使用这种效果的人来说,都有大量的jQuery插件.这里仅仅是少数:

1. Power Zoomer
2. 特色图片Zoomer
3. 云变焦

其次,它很容易实现.只需加载全尺寸图像,但width要比它的实际宽度小,因此它可以通过CSS进行缩放.然后,使用JavaScript + CSS创建与背景图像相同的Div(放大镜),但将background-position属性更改x,y为用户鼠标当前所在的相应缩放坐标.

我认为还有其他方法可以做到这一点,谷歌可能采用不同的方式,但这对我来说是最明显的方式.

Answer 3

访问http://codeblab.com/glass/获取真实生活示例并深入解释此技术.Flash和CSS v3具有足够的功能来构建圆形放大镜.但是,simulate-a-circle-with-overlapping-rectangles适用于(许多)更多平台.

(披露:codeblab.com是我个人的爱好博客,与我在荷兰的工作有一些薄弱的联系.)

Answer 4

有一个完整的例子可以放大任何类型的HTML,包括http://www.aplweb.co.uk/blog/js/magnifying-glass/上的 HTML5 .兼容跨浏览器 - 虽然在大多数浏览器上圆角都有点不合适 - 所以你将不得不使用盒子而不是圆圈.

以下是如何工作:

1. 复制要缩放的内容
2. 将复制的内容放入另一个元素并设置可见的宽度/高度并隐藏溢出
3. 使用JavaScript移动复制的内容,使其按缩放量*鼠标移动移动.同时通过鼠标移动移动可见div.

这几乎就是它.虽然要使它适用于所有浏览器,但仍有很多小事需要注意.