网页特效,显示滑动块位置的内容,隐藏其他位置的内容

SYLiu
  • 537

要实现的效果:
有一个框,这个框移动到哪,就显示这个地方的内容,其他地方的隐藏。

有什么好的实现思路。

回复
阅读 666
4 个回答
✓ 已被采纳

一个div,给他一个足够大的border或者box-shadow,或者 outline均可

.box{
    width:100px;
    height:100px;
    outline:1000px solid #000
}

这样就形成的中间是镂空的,其他地方都是黑色的

刚想的一个、最简单的一种,通过 背景色、字体颜色、元素层级关系 模拟实现

 <div style="**background-color: black**;height: 2em;" >
      <div id="text" style="display: inline-block;color: black;position: relative;height: 2em;z-index: 2;">
      DJHKDKDJDKDJLKDJDDKJD
      </div>
      <div  id="cover" style="left:15px;background-color: #FFFFFF;display: inline-block;position: absolute;height: 2em;width:2em;z-index: 1;"></div>
 </div>

想到两个方案:

  1. 用4个 <div> 覆盖到页面上,中间露出一个洞,根据你想要的位置调整。
  2. clip-path 属性实现

看上去的确可行,也没有什么兼容问题。
border需要移动的时候减去位置
outline倒是不需要减去上左边距

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏