我正在尝试在Feed小部件的底部复制twitter的“淡出”图层(在twitter.com的主页上).
我想出的唯一没有使用html5的方法就是在Feed div之上放置一个绝对定位的div,并给它一个alpha通道的png,上面有一个白色到透明的渐变.这很容易实现.
现在唯一的问题是透明层下面出现的div不可点击.
有关如何使div可点击的任何想法?也许你有另一种方法可以完全复制这种效果?
谢谢!
解决方法
本文介绍了一种捕获onclick事件的方法,并通过暂时隐藏叠加层,重新点击,然后再次取消隐藏来处理它.隐藏对最终用户不应该是可见的.
Forwarding Mouse Events Through Layers:
- The textarea (my masking element) that
is positioned over the grid receives
mouSEOver,mousemove,mousedown,
mouseup and other events.- The top
masking layer is hidden for a moment,
so we can figure out what element is
below the mask at the event location.- The event is re-fired – this is where
the W3 DOM Event model and the simpler
Microsoft equivalent come into play.- Start the process again – ready for
the next event.
编辑:我认为Twitter的作用实际上要简单得多.有一个从SVG借来的CSS属性已经实现了一堆浏览器.
.overlay { pointer-events: none; }
目前Firefox 3.6,Safari 4和谷歌浏览器都支持这一功能 – 所以如果你很高兴它只能在这些浏览器上工作,那么这是一个更简单的选项,还有一个额外的优势,它也适用于悬停事件,而不仅仅是点击活动.