<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > |
<html xmlns= "http://www.w3.org/1999/xhtml" > |
<head> |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> |
<title>Div层的鼠标跟随拖影效果</title> |
<style> |
div {width:10px; height:10px; background:red; position:absolute;} |
</style> |
<script> |
window.onload= function () |
{ |
var aDiv=document.getElementsByTagName( 'div' ); |
var i=0; |
setInterval( function (){ |
for (i=aDiv.length-1;i>0;i--) |
{ |
aDiv[i].style.left=aDiv[i-1].style.left; |
aDiv[i].style.top=aDiv[i-1].style.top; |
} |
},5); |
document.onmousemove= function (ev) |
{ |
var oEvent=ev||event; |
aDiv[0].style.left=oEvent.clientX+ 'px' ; |
aDiv[0].style.top=oEvent.clientY+ 'px' ; |
}; |
}; |
</script> |
</head> |
<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> |
<div></div> |
<div></div> |
<div></div> |
<div></div> |
<div></div> |
</body> |
</html> |