如何限制這個jquery過渡到光標周圍的一個小區域？

Question

所以我想把這個交互式藝術項目放在一起，其中兩幅圖像疊加在一起。當光標越過它時，只顯示背景圖像的一部分。本質上，我想要像這個例子一樣：http://css.dzone.com/news/jquery-image-cross-fade-transi但不是整個圖像。這可能嗎？

Answer 1

這將需要一些時間來開發，但原則上會的工作如下：

1. 在HTML中，創建一個div（poition：相對）包含五個IMGS（位置：絕對;左：0;頂：0）。
2. Bottom img - src =「... src1」，z-index 0.
3. 其他四個imgs（覆蓋） - src =「... src2」，z-index：1。
4. div.onMouseover - 開始監視鼠標移動。
5. div.onMousemove - 讀鼠標位置，並設置這四個疊加CSS剪輯屬性 ，得到的矩形/正方形‘洞’光標周圍，通過它的底部IMG節目。
6. div.onMouseout - 停止監視鼠標移動和恢復剪輯顯示至少一個完整的覆蓋。

據我所知，沒有簡單的方法來做任何東西，而不是一個矩形/方形孔。但也許有人知道不同。