如何将Jquery转换限制在光标周围的一个小区域

Question

所以我想把这个互动艺术项目放在一起，两个图像重叠在一起。当光标移到背景图像上时，只会显示背景图像的一部分。本质上，我想做与本例相同的事情：http://css.dzone.com/news/jquery-image-cross-fade-transi但不是整个图像。这可能吗？

Answer 1

这需要一点时间来开发，但原则上工作如下：

1. 在HTML中，创建一个div（poition:relative），其中包含五个img（position:absolute；left:0；top:0；）
2. 底部img-src="…src1"，z索引0
3. 其他四个img（覆盖）-src="…src2"，z-index:1
4. div.onMouseover-开始监视鼠标移动
5. div.onMousemove-读取鼠标位置并设置四个覆盖的CSS剪辑属性在光标周围给出一个矩形/正方形的"洞"，底部img通过它显示
6. div.onMouseout-停止监视鼠标移动并恢复剪辑以显示至少一个完整的覆盖

据我所知，除了矩形/方形孔之外，没有其他简单的方法可以制作任何东西。但也许有人知道的不一样。