加入收藏 | 设为首页 | 会员中心 | 我要投稿 温州站长网 (https://www.0577zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 使用Alpha通道点击div

发布时间:2020-12-26 11:51:28 所属栏目:资源 来源:网络整理
导读:我正在尝试在feed小部件的底部复制twitter的“淡出”图层(在twitter.com的主页上). 我想出的唯一没有使用html5的方法就是在feed div之上放置一个绝对定位的div,并给它一个alpha通道的png,上面有一个白色到透明的渐变.这很容易实现. 现在唯一的问题是透明层

我正在尝试在feed小部件的底部复制twitter的“淡出”图层(在twitter.com的主页上).

我想出的唯一没有使用html5的方法就是在feed div之上放置一个绝对定位的div,并给它一个alpha通道的png,上面有一个白色到透明的渐变.这很容易实现.

现在唯一的问题是透明层下面出现的div不可点击.
有关如何使div可点击的任何想法?也许你有另一种方法可以完全复制这种效果?

谢谢!

解决方法

本文介绍了一种捕获onclick事件的方法,并通过暂时隐藏叠加层,重新点击,然后再次取消隐藏来处理它.隐藏对最终用户不应该是可见的.

Forwarding Mouse Events Through Layers:

  1. The textarea (my masking element) that
    is positioned over the grid receives
    mouSEOver,mousemove,mousedown,
    mouseup and other events.
  2. The top
    masking layer is hidden for a moment,
    so we can figure out what element is
    below the mask at the event location.
  3. The event is re-fired – this is where
    the W3 DOM Event model and the simpler
    Microsoft equivalent come into play.
  4. Start the process again – ready for
    the next event.

编辑:我认为Twitter的作用实际上要简单得多.有一个从SVG借来的CSS属性已经实现了一堆浏览器.

.overlay { pointer-events: none; }

目前Firefox 3.6,Safari 4和谷歌浏览器都支持这一功能 – 所以如果你很高兴它只能在这些浏览器上工作,那么这是一个更简单的选项,还有一个额外的优势,它也适用于悬停事件,而不仅仅是点击活动.

(编辑:温州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读