|
JavaScript mouse Follow effects
<! DOCTYPE html> |
|
lang= "en" > |
|
|
|
<meta CharSet= "UTF-8" > |
|
<title> </title> |
|
<style> |
|
*{ |
|
margin:0; |
|
padding:0; |
|
} |
|
body{ |
|
height:1000px; |
|
} |
|
div{ |
|
width:50px; |
|
height:50px; |
|
|
|
background:red; |
|
-webkit-border-radius:50%; |
|
-moz-border-radius:50%; |
|
border-radius:50%; |
|
Text-align:center; |
|
Position:absolute; |
|
top:0; |
|
left:0; |
|
line-height:50px; |
|
|
|
} |
|
</style> |
|
|
|
<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> |
|
<script> |
|
var odiv=document.getelementsbytagname (' div '); |
|
Document.onmousemove=function (e) { |
|
E equals Mouse Object |
|
e=e | | window.event; |
|
var maxx=window.innerwidth-odiv[0].offsetwidth-18; |
|
var maxy=window.innerheight-odiv[0].offsetheight-18; Browser width-No. 0 box-width of scroll bar |
|
var Sjyr=math.floor (Math.random () *255); |
|
var Sjyg=math.floor (Math.random () *255); |
|
var Sjyb=math.floor (Math.random () *255); |
|
var Scrolltop=document.documentelement.scrolltop | | Document.body.scrollTop; |
|
if (E.clientx>maxx) { |
|
odiv[0].style.left=maxx+ ' px '; |
|
}else{ |
|
odiv[0].style.left= e.clientx+ ' px '; |
|
} |
|
if (E.clienty>maxy) { |
|
odiv[0].style.top=maxy+ ' px '; |
|
}else{ |
|
odiv[0].style.top= e.clienty+scrolltop+ ' px '; |
|
} |
|
for (Var i=odiv.length-1;i>0;i--) {//for loop lets Div follow his previous |
|
Odiv[i].style.left = Odiv[i-1].style.left; |
|
Odiv[i].style.top = Odiv[i-1].style.top; |
|
odiv[i].style[' backgroundcolor '] = odiv[i-1].style[' backgroundcolor ']; |
|
|
|
|
|
}//the latter follows a DIV in front |
|
The distance the scroll bar scrolls; |
|
|
|
Odiv[0].style.backgroundcolor= ' rgb (' +sjyr+ ', "+sjyg+", "+sjyb+ ') '; |
|
|
|
|
|
|
|
/* odiv[0].style.left= e.clientx+ ' px '; |
|
odiv[0].style.top= e.clienty+scrolltop+ ' px '; */ |
|
E.clientx mouse X distance from browser edge how many pixels |
|
E.clienty mouse Y distance from browser edge how many pixels |
|
} |
|
</script> |
|
</body> |
|
Here are the pictures:
|
JavaScript mouse Follow effect code and understanding