随鼠标移动事件

最新推荐文章于 2024-07-17 13:42:21 发布

koukou0419

最新推荐文章于 2024-07-17 13:42:21 发布

阅读量937

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80926552

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width:100px;

height:100px;

background-color: red;

position:absolute;

left:0;

top:0;

}

</style>

</head>

function getPosition(ev){

var oEve=window.event||ev;

var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

//scrollLeft文档距离可视区clientX的距离滚动条的距离

//eve.clientX 鼠标在可视区中的坐标

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var posX=oEve.clientX+scrollLeft;

//鼠标在整个文档中的坐标即就是包括滚动过后的区域（可是区与页面顶部的距离）:页面中的绝对位置

var posY=oEve.clientY+scrollTop;

return{x:posX,y:posY};

}

document.onmousemove=function(ev){

var oDiv=document.getElementsByTagName('div')[0];

var position=getPosition(ev);

oDiv.style.left=position.x+'px';

oDiv.style.top=position.y+'px';

}

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

koukou0419

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
随鼠标移动事件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compa...
复制链接

扫一扫