js 实现新手引导页 思路
原创
DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>新手指导页title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
overflow: auto;
}
#cloneBox {
border: 1px solid #000;
box-sizing: border-box;
height: 150%;
padding: 20px;
position: relative;
}
.redBox {
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
#mb {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
top: 0;
}
style>
head>
<body>
<div id="cloneBox">
<h4>1212h4>
<h2>32323h2>
<div class="redBox" id="redBox">div>
<button id="btn" onClick='createMB()'>指导button>
div>
body>
html>
<script type="text/javascript">
const redBox = document.getElementById('btn')
const cloneBox = document.getElementById('cloneBox')
const bodyEle = document.body
// 元素距离上 左 的距离
let left_ = redBox.offsetLeft
let top_ = redBox.offsetTop
let that = this
function createMB() {
let Div = document.createElement('div')
Div.id = 'mb'
Div.onclick = function() {
that.close()
}
const newEle = redBox.cloneNode(true)
newEle.style.position = 'absolute'
newEle.style.left = left_ + 'px'
newEle.style.top = top_ + 'px'
Div.appendChild(newEle)
cloneBox.appendChild(Div)
}
function close() {
const mb = document.getElementById('mb')
cloneBox.removeChild(mb)
}
createMB()
// const oldEle = document.getElementById('cloneBox')
// const newEle = oldEle.cloneNode(true)
// document.body.appendChild(newEle)
script>