看了張鑫旭的《騰訊微雲黑色遮罩引導蒙版更好的CSS實現方式》和《CSS3下的圓形遮罩效果實現與應用》,終於搞明白了遮罩新功能引導層是如何實現的。
原文鏈接:http://www.zhangxinxu.com/wordpress/?p=5290 http://www.zhangxinxu.com/wordpress/?p=2118
要實現遮罩層和部分區域高亮顯示,這裏的思路是應用了元素的border屬性,將元素的四個border值設置的非常大,鋪滿整個屏幕,這樣就實現了頁面遮罩部分鏤空的效果。
讓遮罩層的的寬度和高度等於目標元素的寬度和高度,剩下的遮罩效果就是合理設置遮罩層四個border的值的大小,使遮罩層鋪滿整個屏幕。
我們想把引導效果做的更加好看一下,製作成橢圓的效果,需要用到css3的border-radius:50%;並且圈圈內帶有模糊效果,如何實現?就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);這樣一個屬性。我們需要把當前元素作爲外層限制標籤,裏面重新生成一個大尺寸僞元素,實現內層的高亮橢圓內邊緣模糊效果,最終實現的效果如下如圖所示:
由於我們的目標元素的寬度和高度是不固定的,我們可以設置各種元素的高亮效果,就不用在手動設置border的寬度來配合目標元素的寬度和高度,有沒有一個通用的方法?這就需要用JS來實現啦,js的實現思路如下:
1 獲取目標元素的寬度和高度,targetWidth,targetHeight
2 獲取頁面的寬度和高度,pageWidth,pageHeight
3 獲取目標元素在頁面中的位置,offsetTop,offsetLeft(目標元素距離 頁面頂部的距離,距離頁面左邊的距離,包括頁面的滾動條)
4 設置遮罩層的寬度和高度等於目標元素的寬度和高度
5 最重要的一步,設置 遮罩層的四個邊框的大小是決定效果至關重要的一步。
上邊框 = offsetTop
右邊框 = pageWidth - targetWdith - offsetLeft
下邊框 = pageHeight - targetHeight - offsetTop
左邊框 = offssetLeft
6 針對於瀏覽器的resize事件,同步實現遮罩邊框的改變
源碼如下:
<style>
html{width:100%;height:100%;}
*{margin:0;padding:0;}body{background:#f2f2f2;width:100%;height:100%;}
.cover {
display: none;
position: absolute;
width: 0; height: 0;
left: 0; top: 0; right: 0; bottom: 0;
border: 0 solid #000;
opacity: .5;
filter: alpha(opacity=5);
z-index: 9;
/* 過渡效果 */
transition: all .25s;
/* 邊緣閃動問題fix */
box-shadow: 0 0 0 100px #000;
overflow: hidden;
}
.cover::before {
content: '';
width: 100%; height:100%;
border-radius: 50%;
border: 400px solid #000;
position: absolute;
left: -400px; top: -400px;
box-shadow: inset 0 0 5px 2px rgba(0,0,0,.5);
}
/* IE7, IE8 img */
.cover > img {
width: 100%; height: 100%;
}
a{display: block;width:100px;height:50px;line-height: 50px;font-size:12px;}
#add{height:50px;line-height: 50px;margin-top:10px;background:#fff;}
#aa{width:150px;height:50px;line-height:50px;margin-top:10px;}
span{display:inline-block;}
</style>
<div id="cover" class="cover"></div>
<div id="aa">請添加您的收貨地址</div><br><br>
<span id="bb">您的姓名</span><br><br><br>
<span id="cc">請添加您的電話號碼3請添加您的電話號碼</span>
<script>
var coverGuide = function(cover, target) {
var body = document.body, doc = document.documentElement;
if (cover && target) {
// target size(width/height)
var targetWidth = target.clientWidth,
targetHeight = target.clientHeight;
// page size
var pageWidth = doc.scrollWidth,
pageHeight = doc.scrollHeight;
// offset of target
var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
// set size and border-width
cover.style.width = targetWidth + 'px';
cover.style.height = targetHeight + 'px';
cover.style.borderWidth =
offsetTop + 'px ' +
(pageWidth - targetWidth - offsetLeft) + 'px ' +
(pageHeight - targetHeight - offsetTop) + 'px ' +
offsetLeft + 'px';
cover.style.display = 'block';
// resize
if (!cover.isResizeBind) {
if (window.addEventListener) {
window.addEventListener('resize', function() {
coverGuide(cover, target);
});
cover.isResizeBind = true;
} else if (window.attachEvent) {
window.attachEvent('onresize', function() {
coverGuide(cover, target);
});
cover.isResizeBind = true;
// IE7, IE8 box-shadow hack
cover.innerHTML = '<img src="guide-shadow.png">';
}
}
}
};
var elCover = document.getElementById('cover');
var a = document.getElementById("aa");
var arrElTarget = [a,
document.getElementById('bb'),
document.getElementById('cc')
], index = 0;
coverGuide(elCover, a);
elCover.onclick = function() {
index++;
if (!arrElTarget[index]) {
index = 0;
}
coverGuide(elCover, arrElTarget[index]);
};
</script>
這樣就可以實現一個頁面多個高亮區域不停的來回調動
完全是張鑫旭的思路和代碼,就拿來用了,算是學到了一招,弄明白了。有空了,用JQ再來寫一遍。