如何将此Jquery过渡限制在游标周围的小区域？

Question

所以我想整理这个交互式艺术项目，其中两个图像被覆盖。当光标越过它时，只显示背景图像的一部分。基本上我想和这个例子做同样的事情：http://css.dzone.com/news/jquery-image-cross-fade-transi但不是整个图像。这可能吗？

Answer 1

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

1. 在HTML中，创建一个包含五个imgs的div（poition：relative）（position：absolute; left：0; top：0;）。
2. 底部img - src =“... src1”，z-index 0.
3. 其他四个imgs（叠加层） - src =“... src2”，z-index：1。
4. div.onMouseover - 开始监控mousemove。
5. div.onMousemove - 读取鼠标位置并设置四个叠加层的CSS剪辑属性 在光标周围给出一个矩形/方形“孔”，底部img显示。
6. div.onMouseout - 停止监控mousemove并恢复剪辑以显示至少一个完整覆盖。

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