44 lines
1.3 KiB
HTML
44 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
|
|
<title>始终飞向鼠标的纸飞机</title>
|
|
<!-- 引入字体图标 -->
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/80.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="plane">
|
|
<i class="fa fa-paper-plane" aria-hidden="true"></i>
|
|
</div>
|
|
<script>
|
|
let plane=document.getElementById('plane');
|
|
let deg=0,ex=0,ey=0,vx=0,vy=0,count=0;
|
|
window.addEventListener('mousemove',(e)=>{
|
|
ex=e.x-plane.offsetLeft-plane.clientWidth/2;
|
|
ey=e.y-plane.offsetTop-plane.clientHeight/2;
|
|
deg=360*Math.atan(ey/ex)/(2*Math.PI)+45;
|
|
if(ex<0){
|
|
deg+=180;
|
|
}
|
|
count=0;
|
|
})
|
|
function draw(){
|
|
plane.style.transform='rotate('+deg+'deg)';
|
|
if(count<100){
|
|
vx+=ex/100;
|
|
vy+=ey/100;
|
|
}
|
|
plane.style.left=vx+'px';
|
|
plane.style.top=vy+'px';
|
|
count++;
|
|
}
|
|
setInterval(draw, 1);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |