1.知识点
js基础、BOM、DOM、数组、html5、css3、回调函数
2.html+css3创建好前端页面
这里我使用了两种不同的方法:
html代码
<!-- 方法一 -->
<div id="" class="option">
<div onmousemove="option01()" onmouseleave=" reset()" class="concainer">
<p>方法一</p>
</div>
<div class="result">
<div class="header">结果</div>
<p id="result_speed">速度:0</p>
<p id="result_distance">距离:0</p>
<p id="result_direction">方向:0</p>
</div>
</div>
<!-- 方法一 -->
<!-- 方法二 -->
<div id="" class="option">
<div class="concainer">
<div id="" class="top_line" onmousemove="posi01(),posi02()"></div>
<div id=""class="concainer_son">
<div id="" class="left_line" onmousemove="posi01(),posi02()"></div>
<div id="control02" onmousemove="option02()" onmouseleave=" reset()"><p style="line-height: 1em;">方法二</p></div>
<div id="" class="left_line" onmousemove="posi01(),posi02()"></div>
</div>
<div id="" class="top_line" onmousemove="posi01(),posi02()"></div>
</div>
<div class="result">
<div class="header">结果</div>
<p id="result_speed2">速度:0</p>
<p id="result_distance2">距离:0</p>
<p id="result_direction2">方向:0</p>
</div>
</div>
<!-- 方法二 -->
css3代码
* {
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(0deg,#1c0643,#041334);
background-repeat: no-repeat;
}
.option{
background-color: #d8d8d8;
box-sizing: border-box;
margin-top: 4em;
height: 360px;
padding: 30px;
display: flex;
justify-content: center;
}
.concainer{
background-color: #9d9d9d;
width: 400px;
border-radius: 8px;
justify-content: center;
display: flex;
flex-direction: column;
}
p{
color: aliceblue;
line-height: 300px;
}
.result{
background-color: #ffffff;
margin-left: 1em;
width: 120px;
}
.result p{
color: gray;
line-height: 1.8em;
padding:0.5em 0.8em;
}
.header{
background-color: #5555ff;
color: whitesmoke;
height: 2em;
text-align: center;
line-height: 2em;
}
<!--下面是02.css-->
<!--下面是02.css-->
<!--下面是02.css-->
.top_line, .left_line{
background-color: blue;
margin: 0;
padding: 0;
display: block;
}
.top_line{
height: 15px;
width: 100%;
}
.concainer_son{
display: flex;
}
.left_line{
height: 100%;
width: 15px;
}
#control02{
width: 370px;
height: 270px;
}
3.js获取到鼠标事件
1.理解鼠标事件
鼠标事件有很多,我们这里用到了onmousemove、onmouseleave、,onmouseenter。