图片跟着鼠标移动
例题:无论鼠标移动到哪儿,图片始终跟着鼠标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{width: 50px;height: 50px;position: absolute;border-radius: 50%;}
</style>
</head>
<body>
<script type="text/javascript">
var oImg=createImg(); //创建img
document.function(e){
//console.log('move');//可以知道鼠标移动的x,y位置
e=e||window.event;
//console.log(e);
//获取鼠标位置
var x=e.clientX;
var y=e.clientY;
//console.log(x,y);
oImg.style.left=x+'px';//要添加单位
//oImg.style.log=x+10+'px';//鼠标和图片的位置的距离
oImg.style.top=y+'px';
document.body.appendChild(oImg);//让图片在页面中显示
}
function createImg(){
var img=document.createElement('img');
img.src='./images/2.jpg';
return img;
}
</script>
</body>
</html>