1

I'm working on a project at the moment where i have two images, one placed ontop of the other, and I would like the bottom image to show through more as the mouse moves over the image, and i need it on a pixel by pixel level, i've tried creating X by Y amount of divs that were 1px by 1px each sharing the same background, but offset the background by their positions so the top image pixels were each a 1px div, so that I could change the opacity of each div on mouseover. Trying this brought my browser to a standstill with so many divs.

Is there a way where I can do this (not in flash) but in a way it will work on all browsers quick enough for it to look smooth and without the browser grinding to a halt?

4

1 回答 1

0

最合适的是 Canvas 元素。但并非所有浏览器都支持它，只有真正的浏览器支持。（Internet Explorer 仅在版本 9 中添加了对 Canvas 的支持）。

在图像上使用绝对定位的画布，有人可以修改画布的 alpha 值以让底层图像“发光”。

一个非生产代码示例可能是这样的（在 FF7 中测试和工作）：http: //jsbin.com/uxizav/edit#preview

于 2011-10-29T13:14:30.313 回答