JavaScript follows a small demo of the mouse moving cue box

Below provides a follow the mouse to move the idea of the box, easy to use in the future work, mainly applied to the mouse movement produced by the value of the mobile cue box positioning ...

CSS Code

. box{height:100px;width:100px;background:orange;position:relative;margin:40px;}

. Move{height:20px;width:20px;background:red;position:absolute;left:0px;top:0px;display:none;}

HTML code

<div id= "Wrap" >

<div class= "box" >

<div class= "Move" > Tips </div>

</div>

<div class= "box" >

<div class= "Move" > Tips </div>

</div>

<div class= "box" >

<div class= "Move" > Tips </div>

</div>

</div>

JavaScript code

Window.onload = function () {

Gets the element to execute the event

var owrap = document.getElementById (' wrap ');

Do not support getelementsbyclassname under IE8, please write your own function or replace it in other ways.

var abox = owrap.getelementsbyclassname (' box ');

var amove = owrap.getelementsbyclassname (' move ');

Traverse all the box elements

for (var i=0; i<abox.length; i++) {

//Gets the element of the current triggering event

(function (i) {

when moving within the range of the box element, the corresponding values are generated

Abox[i].onmousemove=function (EV) {

var oevent = EV | | Event

Gets the current position of the mouse

var disx = Oevent.clientx-abox[i].offsetleft;

var disy = oevent.clienty-abox[i].offsettop;

If the mouse position is out of range then let's hide

if (Disx >= this.offsetwidth) {

Amove[i].style.display = ' None ';

}else if (Disy >= this.offsetheight) {

Amove[i].style.display= ' None ';

};

Define where the move element moves

Amove[i].style.left = disx + ' px ';

Amove[i].style.top = Disy + ' px ';

}

When the mouse enters the display

Abox[i].onmouseover = function () {

Amove[i].style.display = ' block ';

}

Hide when the mouse is removed

Abox[i].onmouseout = function () {

Amove[i].style.display = ' None ';

}

}) (i)

}

}