移动精灵
程序员文章站
2022-07-13 08:29:44
...
clientX: 浏览器可视区域的x坐标
clientY: 浏览器可视区域的y坐标
pageX: 浏览器内容区域的x坐标
pageY: 浏览器内容区域的y坐标
screenX: 显示器屏幕的x坐标
screenY: 显示器屏幕的y坐标
offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
offsetY: 鼠标点击的元素位置距离元素上边界的y坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{width:80%;height: 80%;background: black;position: relative;top: 10%;left: 10%;overflow: hidden;}
body,html{height: 100%;}
/*定位,给小精灵*/
img{width: 300px;height: 300px;position: absolute;}
*{padding: 0;margin: 0;}
</style>
<script type="text/javascript">
onload = function(){
var box = document.getElementById("container");
var img = document.getElementsByTagName('img')[0];
//鼠标移动事件
box.onmousemove = function(event){
//获取坐标
var clientX = event.clientX;
var clientY = event.clientY;
//定义新的坐标
img.style.left = clientX-200 +'px';
img.style.top = clientY-200 + 'px';
}
}
</script>
</head>
<body>
<div id="container">
<img src="img/girl.gif"/>
</div>
</body>
</html>
上一篇： pygame