移动精灵

来源：互联网发布：如何通过网络定位找人编辑：程序博客网时间：2024/05/01 19:06

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>

阅读全文

0 0