移动精灵

水深无声 2022-06-05 08:06 225阅读 0赞

> clientX: 浏览器可视区域的x坐标  
> clientY: 浏览器可视区域的y坐标  
> pageX: 浏览器内容区域的x坐标  
> pageY: 浏览器内容区域的y坐标  
> screenX: 显示器屏幕的x坐标  
> screenY: 显示器屏幕的y坐标  
> offsetX: 鼠标点击的元素位置距离元素左边界的x坐标  
> offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

![这里写图片描述][SouthEast]

<!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>

[SouthEast]: /images/20220605/e3f776fb1ae840c8b94b09765490a77f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 精灵

CSS 精灵图像精灵图像精灵 - 简单的例子实例例子解释图像精灵

柔情只为你懂/ 2022年11月11日 13:05/ 0 赞/ 137 阅读

相关网摘精灵教程：网摘精灵界面预览

网摘精灵教程：网摘精灵界面预览 ![keyimg.gif][] [http://www.wangjianran.com/wangzhaijingling/keyimg.gi

小咪咪/ 2022年10月02日 04:47/ 0 赞/ 125 阅读

相关 CSS 背景background，精灵spirit(移动背景图位置来实现)

参考：[https://blog.csdn.net/houyanhua1/article/details/78387884][https_blog.csdn.net_houya

柔光的暖阳◎/ 2022年09月10日 08:27/ 0 赞/ 166 阅读

相关 cocos3.X拖动精灵移动

1、创建一个精灵sprite； 2、一个触摸事件 listener ，设置listener的onTouchBegan,onTouchMoved,onTouchEnded;

àì夳堔傛蜴生んèń/ 2022年08月05日 08:00/ 0 赞/ 231 阅读

相关 linux 精灵函数

void daemon() { int pid, fd; if ((pid = fork()) == -1) exit(1);

一时失言乱红尘/ 2022年08月03日 00:09/ 0 赞/ 95 阅读

相关触摸精灵之keepScreen

最近在android上使用触摸精灵写脚本，使用findImagelnRegionFuzzy()函数查找图像时一直查找不到，经过调试原来发现是keepScreen导致查找不到。脚

﹏ヽ暗。殇╰゛Y/ 2022年07月19日 06:00/ 0 赞/ 225 阅读

相关 unity 读取精灵图Sprite

在ＵＩj界面搭建时，通过Unity自带的工具将一张图片切成许多小图在代码里读取一个图片下的N个小图片废话不多说，上代码 private sprite\[\] emo

迷南。/ 2022年06月14日 09:10/ 0 赞/ 346 阅读

相关按键精灵脚本笔记鼠标按直线轨迹移动

Function lineMove(targetX, targetY) //获取当前鼠标的坐标 GetCursorPos x, y

小灰灰/ 2022年06月07日 13:16/ 0 赞/ 807 阅读

相关移动精灵

> clientX: 浏览器可视区域的x坐标 > clientY: 浏览器可视区域的y坐标 > pageX: 浏览器内容区域的x坐标 > pageY: 浏览器内容区

水深无声/ 2022年06月05日 08:06/ 0 赞/ 226 阅读

相关按键精灵使用心得

按键精灵使用心得一、总结一句话总结：真的挺好用的好用 1、在按键精灵中写好的脚本点击运行按钮无法运行，怎么解决？ F12 F10

柔情只为你懂/ 2021年09月20日 11:08/ 0 赞/ 569 阅读