html下一步隐藏,js指引提示-下一步-下一步

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;

}

第一步

第二步

第三步

下一步

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: '我是第三步的说明'

}

]);