First, get the mouse coordinates
ClientX: The distance from the edge of the mouse to the visible area; ScrollLeft: The distance from the scroll bar to the top of the page (the distance from the viewable area)
Compatibility wording:
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
var scrollleft = Document.documentElement.scrollLeft | | Document.body.scrollLeft;
Follow the mouse to move the divs, the code is as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<meta charset= "Utf-8"/>
<style>
div {
width:10px;
height:10px;
Background: #F00;
Position:absolute;
}
</style>
<script>
Window.onload = function () {
Document.onmousemove = function (EV) {
var oevent = EV | | Event
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
var scrollleft = Document.documentElement.scrollLeft | | Document.body.scrollLeft;
var odivs = document.getelementsbytagname ("div");
Odivs[0].style.left = oevent.clientx + scrollleft + "px";
Odivs[0].style.top = oevent.clienty + scrolltop + "px";
for (var i = odivs.length-1; i > 0; i--) {
Odivs[i].style.left = Odivs[i-1].style.left;
Odivs[i].style.top = Odivs[i-1].style.top;
}
}
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
js-event 1_ get mouse coordinates clientx+scrollleft and compatibility notation _ follow mouse move divs