引导页穿透层思路
使用无限大的阴影
禁用滚动思路使用js禁用body的touchmove事件
禁用里层点击使用一个透明层遮住
动画使用transition过渡即可
实现代码doctype html>
web03.cn
html,body{
width: 100%;
height: 100%;
}
.guide-box{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
.guide-box > .guide{
position: fixed;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 1px 1px 100000px 100000px rgba(0,0,0,0.5);
transition: all 500ms;
}
.step{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
}
.guide-tip{
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
white-space: nowrap;
}
步骤1
步骤2
步骤3
步骤4
步骤5
上一步
下一步
// 禁用滚动给
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, { passive: false });
let steps = document.getElementsByClassName('step-address')
let guide = document.getElementsByClassName('guide')[0]
let stepIndex = 0
document.getElementsByClassName('pre')[0].onclick = function(){
stepIndex -= 1
if (stepIndex4){
stepIndex = 4
} else {
runGuide()
}
}
runGuide()
function runGuide (){
guide.style.left = steps[stepIndex].offsetLeft + steps[stepIndex].clientWidth/2 - guide.clientWidth/2 + 'px'
guide.style.top = steps[stepIndex].offsetTop + steps[stepIndex].clientHeight/2 - guide.clientHeight/2 + 'px'
}
