标签： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional
标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" 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>js指引提示-下一步-下一步
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33018.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")