初学js---获取鼠标在页面中的位置

图片跟着鼠标移动：

1.获取鼠标在页面中的位置：（pageX/pageY获取鼠标在页面中的位置）

2.通过id或者其他方法找到图片，然后让图片的位置变为和鼠标位置相同，注意要先让图片脱离文档，即设置position:absolute.

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取鼠标的位置</title>
</head>
<body>
<img id="img" src="../img/天使.png"/ style="width:50px;height:50;">
<script>
var img=document.getElementById(‘img‘);
document.onmousemove=function(e){ //当鼠标移动的时候触发事件
e=e ||window.event; //兼容性问题
img.style.position=‘absolute‘;

//pageX/pageY获取鼠标在页面中的位置
img.style.left=e.pageX+‘px‘;
img.style.top=e.pageY+‘px‘;;
}
</script>

</body>
</html>

原文地址：https://www.cnblogs.com/ayayi-666/p/9397724.html

时间： 2025-01-09 18:47:00

初学js---获取鼠标在页面中的位置的相关文章

获取鼠标早盒子中的位置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; border: 1px solid red; margin: 100px 10px

关于js获取元素在屏幕中的位置的方法

针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧下面上HTML代码 <div class="left_footer"> <p data-num="1" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">上</p> <p data-num="2&qu

原生js获取鼠标坐标方法全面讲解-zmq

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持 page

js获取鼠标当前的位置

有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(

鼠标参数，获取鼠标在网页中的坐标

1. 事件对象 event 标准浏览器传递给响应函数 IE 把 event 事件对象作为全局对象 window 的一个属性 2. 浏览器滚动条高度标准浏览器使用 documen.documentElement.scrollLeft documen.documentElement.scrollTop Safari 等浏览器使用 window.pageXOffset window.pageYOffset 没有 doctype 声明的页面 document.body.scrollL

获取元素在页面中left,top值(忽略其父级的定位)

函数用到的属性有: element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器 element.offsetParent 返回元素的偏移容器 element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

获取指定URl页面中所有链接

//获取指定URL页面中所有链接 function get_url_href($url){ $html = file_get_contents($url); $dom = new DOMDocument(); @$dom->loadHTML($html); $xpath = new DOMXPath($dom); $hrefs = $xpath->evaluate('/html/body//a'); for($i=0;$i<$hrefs->length;$i++){ $href =

如何获取上一个页面中checkbox控件选中的值

php开发中,<php开发中.<php开发中.如何获取上一个页面中checkbox控件选中的值呢?并输出出来,以下是代码示例: <? $music=$_POST['music']; //取得所选中的checkbox个数 $coun=count$music; ifis_arrai$music{ echo'您选择的 : '; foreach$musicas$kei=>$var echo' ['.$var.']'; echo$key; } ?> *****************

js获取鼠标移动坐标

js获取鼠标移动坐标,很多情况下还需要考虑document.documentElement.scrollLeft . document.documentElement.clientLeft; var _touchstart, _touchend,_touchmove; var isPC=window.ontouchstart===undefined; if(isPC){ _touchstart="mousedown"; _touchmove="mousemove";