Skip to content

Instantly share code, notes, and snippets.

@jasontwuk

jasontwuk/eloquentJs_Ch15_Exercise_MouseTrail.html

Created November 9, 2019 20:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasontwuk/bcda993e18c348e86bf745d1715a303f to your computer and use it in GitHub Desktop.
Save jasontwuk/bcda993e18c348e86bf745d1715a303f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
eloquentJs_Ch15_Exercise_MouseTrail.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Ch15-exercise-Mouse Trail</title>
<style>
.trail { /* className for the trail elements */
position: absolute;
height: 6px;
width: 6px;
border-radius: 3px;
background: teal;
}
body {
height: 300px;
}
</style>
</head>
<body>
<script>
function myTrail(event){
let trail = document.createElement("div");
trail.className = "trail";
trail.style.left = (event.pageX - 3) + "px";
trail.style.top = (event.pageY - 3) + "px";
document.body.appendChild(trail);
// Delete the trail div after 200 millisecond.
setTimeout(() => document.body.removeChild(trail), 200);
}
window.addEventListener("mousemove", myTrail);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment