鍍金池/ 問答/HTML5  HTML/ 如何寫有遮罩層下的onresize函數(shù)

如何寫有遮罩層下的onresize函數(shù)

當(dāng)前的方案是用遮罩直接蓋住原始層， 對(duì)原始層需要高亮的元素，根據(jù)原位置算出長(zhǎng)寬及top,left 值，在遮罩層上畫出一個(gè)對(duì)應(yīng)的高亮框(一個(gè)div，背景設(shè)為白色) 蓋在原始層的上面，z-index比原始層高。
當(dāng)窗口不變的話，這個(gè)方案沒問題，但是當(dāng)窗口大小變化的話，高亮的地方就不對(duì)了。
需求是：無論當(dāng)前url是在哪，當(dāng)窗口大小發(fā)生變化的時(shí)候，原始層需要高亮的元素位置變動(dòng)了，高亮框也能跟著動(dòng)，繼續(xù)高亮蓋住原來的位置。
謝謝。

需要說明的還有：
1) 遮罩層頁面有多個(gè)，對(duì)應(yīng)有多個(gè)url
2) 有些頁面（url)可能有一個(gè)高亮框,也可能有多個(gè)。

現(xiàn)在能想到的是：
1） 只需要處理當(dāng)前頁面的高亮的div

回答
編輯回答
巴扎嘿

你好，我覺得高亮框可以利用z-index這個(gè)屬性實(shí)現(xiàn)。這個(gè)是代碼。

//html
<div class="old">
  原始層
  <span class="high">高亮部分</span>
</div>
<div class="cover">遮罩層</div>
//css
.cover{
  width:100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  position:absolute;
  top: 0;
  z-index:999;
}
.old{
  position: relative;
}
.high{
  position: absolute;
  top:20px;
  width:200px;
  height:100px;
  background:#fff;
  z-index: 1000;
}
body,html{
  margin: 0;
  padding:0;
}

  • 效果大概這這樣的

圖片描述

2018年9月15日 14:58