分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:07责任编辑:傅花花关键词: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>

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved