移动精灵

最新推荐文章于 2021-08-09 21:03:40 发布

hchu

最新推荐文章于 2021-08-09 21:03:40 发布

阅读量685

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_40688956/article/details/78599744

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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>