<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css实现用户引导</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#first-step {
height: 100px;
width: 300px;
border: 1px solid black;
border-radius: 4px;
line-height: 100px;
text-align: center;
position: absolute;
top: 50px;
left: 200px;
}
#second-step {
height: 100px;
width: 300px;
border: 1px solid black;
border-radius: 4px;
line-height: 100px;
text-align: center;
position: absolute;
top: 50px;
left: 800px;
}
#third-step {
height: 100px;
width: 300px;
border: 1px solid black;
border-radius: 4px;
line-height: 100px;
text-align: center;
position: absolute;
top: 500px;
left: 200px;
}
.mask-tip {
min-width: 175px;
text-align: center;
border: 1px solid rgb(0, 94, 166);
border-radius: 4px;
padding: 5px 10px;
position: absolute;
top: 120px;
left: 65px;
background: white;
}
.mask-tip:before {
content: "";
width: 10px;
height: 10px;
border: 1px solid rgb(0, 94, 166);
background: white;
position: absolute;
transform: rotate(45deg);
top: -6px;
left: 85px;
border-right-width: 0;
border-bottom-width: 0;
}
.mask-tip-desc {
display: block;
margin-bottom: 10px;
}
.mask-tip-btn {
border-radius: 4px;
padding: 6px;
border: none;
background-color: rgb(0, 94, 166);
cursor: pointer;
color: white;
}
</style>
</head>
<body>
<div id="first-step">第一步</div>
<div id="second-step">第二步</div>
<div id="third-step">第三步</div>
<div id="mask">
<div class="mask-tip">
<span id="mask-desc" class="mask-tip-desc"></span>
<button id="mask-next" class="mask-tip-btn">下一步</button>
</div>
</div>
</body>
<script type="text/javascript">
function getElementById(id) {
return document.getElementById(id);
};
function mask(params) {
var mask = getElementById('mask');
if (params.length === 0) {
mask.style.display = 'none';
return;
}
var {
id,
desc
} = params[0];
/**************** 获取要cover的元素基本信息 ****************/
var ele = getElementById(id);
var offsetWidth = ele.offsetWidth;
var offsetHeight = ele.offsetHeight;
var offsetLeft = ele.offsetLeft;
var offsetTop = ele.offsetTop;
console.log(offsetWidth, offsetHeight, offsetLeft, offsetTop);
/**************** 获取屏幕大小，包含滚动区域 ****************/
var scrollWidth = document.body.scrollWidth;
var scrollHeight = document.body.scrollHeight;
console.log(scrollWidth, scrollHeight);
/**************** 为Mask设置css ****************/
mask.style.width = scrollWidth + 'px';
mask.style.height = scrollHeight + 'px';
mask.style.borderColor = "rgba(0, 0, 0, 0.75)";
mask.style.borderStyle = 'solid';
mask.style.borderLeftWidth = offsetLeft - 5 + 'px';
mask.style.borderRightWidth = (scrollWidth - offsetWidth - offsetLeft - 5) + 'px';
mask.style.borderTopWidth = offsetTop - 5 + 'px';
mask.style.borderBottomWidth = (scrollHeight - offsetHeight - offsetTop - 5) + 'px';
mask.style.position = 'absolute';
mask.style.left = 0;
mask.style.top = 0;
/**************** 为Mask设置desc ****************/
var maskDesc = getElementById('mask-desc');
maskDesc.innerHTML = desc;
/**************** 绑定next事件 ****************/
var nextBtn = getElementById('mask-next');
(function(mask) {
nextBtn.onclick = function() {
params.shift();
mask(params);
};
})(arguments.callee);
};
mask([{
id: 'first-step',
desc: '我是第一步的说明'
},
{
id: 'second-step',
desc: '我是第二步的说明'
},
{
id: 'third-step',
desc: '我是第三步的说明'
}
]);
</script>
</html>
