Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitffb37eb

Browse files
author
lijiajun
committed
飞机随着鼠标移动
1 parent4c106cb commitffb37eb

File tree

2 files changed

+127
-0
lines changed

2 files changed

+127
-0
lines changed
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
#始终飞向鼠标的纸飞机
2+
3+
##cdn
4+
5+
font-awesome
6+
7+
```
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9+
```
10+
11+
font-awesome 中文网站
12+
13+
```
14+
http://www.fontawesome.com.cn/faicons/
15+
```
16+
17+
```
18+
<i class="fa fa-paper-plane" aria-hidden="true"></i>
19+
```
20+
21+
##分析
22+
23+
![20220905191137](https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/20220905191137.png)
24+
25+
![20220905154558](https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/20220905154558.png)
26+
27+
##效果
28+
29+
![](https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/飞机跟随鼠标演示.gif)
30+
31+
[来源](https://www.bilibili.com/video/BV1NL411w7qC?spm_id_from=333.999.0.0&vd_source=e5d12c1cab2795094fb351bf2e212c4e)
32+
33+
>来源中的代码有问题，飞机无法停下
34+
35+
![20220905191023](https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/20220905191023.png)
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7+
<!-- 引入图标库 font-awesome,使用 cdn 引入-->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
11+
/>
12+
<title>Document</title>
13+
<style>
14+
/* 去掉默认的边距等 */
15+
* {
16+
margin:0;
17+
padding:0;
18+
}
19+
20+
body {
21+
background-color: skyblue;
22+
}
23+
24+
.fa {
25+
position: absolute;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<!-- 使用图标库中的 plane -->
31+
<!-- <div class="plane"> -->
32+
<iclass="fa fa-paper-plane"aria-hidden="true"></i>
33+
<!-- </div> -->
34+
<script>
35+
// 这个小项目的关键在这里
36+
// 获取飞机元素
37+
letplane=document.querySelector(".fa");
38+
console.log(plane);
39+
// 初始化一系列坐标变量
40+
/*
41+
deg：角度
42+
ex：差，分析图中的紫色阴影部分（横
43+
ey：差，分析图中的紫色阴影部分（竖
44+
vx：赋给 left
45+
vy：赋给 top
46+
locateX：记录鼠标的横向坐标
47+
locateY：记录鼠标的纵向左表
48+
*/
49+
letdeg=0,
50+
ex=0,
51+
ey=0,
52+
vx=0,
53+
vy=0,
54+
locateX=0,
55+
locateY=0;
56+
// 监听鼠标移动事件
57+
window.addEventListener("mousemove",(e)=>{
58+
// 获取鼠标位置的相关信息
59+
// 此处请看 README 中的分析
60+
ex=e.x-plane.offsetLeft-plane.clientWidth/2;
61+
ey=e.y-plane.offsetTop-plane.clientHeight/2;
62+
deg=(360*Math.atan(ey/ex))/(2*Math.PI)+45;
63+
// 获得鼠标不动的时候鼠标的位置
64+
locateX=e.clientX;
65+
locateY=e.clientY;
66+
if(ex<0)deg+=180;
67+
});
68+
// 定义执行函数
69+
letdraw=()=>{
70+
// 旋转效果 -> 飞机的头部旋转
71+
plane.style.transform=`rotate(${deg}deg)`;
72+
// 增加的会越来越小
73+
vx+=ex/100;
74+
vy+=ey/100;
75+
plane.style.left=`${vx}px`;
76+
plane.style.top=`${vy}px`;
77+
};
78+
// 定时器，定时执行执行函数
79+
lettimer=setInterval(()=>{
80+
draw();
81+
// 使得飞机停下，来源中并没有相关代码
82+
if(
83+
Math.abs(vx-locateX)<=10&&
84+
Math.abs(vy-locateY)<=10
85+
){
86+
ex=0;
87+
ey=0;
88+
}
89+
},15);
90+
</script>
91+
</body>
92+
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp