前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册
本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(8)

JavaScript之offset实现鼠标坐标获取和窗口内模块拖动-案例演示

发布于2021-05-30 07:08     阅读(833)     评论(0)     点赞(6)     收藏(4)

offset

offset 即偏移量，使用 offset 系列相关属性可以 动态的 获取该元素的位置（偏移）、大小等，如：
元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注：返回的数值不带单位

offset 系列常用的属性包括：
    element.offsetParent
    返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回 body
    注意，parentNode 和 offsetParent 还是有本质上的区别的：parentNode 返回的是直接父级元素，offsetParent 返回的是带有定位的父级元素。
    element.offsetTop
    返回元素带有定位父元素上方的偏移
    element.offsetLeft
    返回元素带有定位父元素左边框的偏移
    element.offsetWidth
    返回自身包括 padding, 边框, 内容区的宽度，返回数值不带单位
    element.offsetHeight
    返回自身包括 padding, 边框, 内容区的高度，返回数值不带单位

offset 和 style 的区别

offsetstyle
offset 可以得到任意样式表中的样式值style 只能得到行内样式表中的样式值，无法获得内嵌样式
offset 系列获得的数值是没有单位的style.width 获得的是带有单位的字符串
offsetWidth 包含 padding+border+widthstyle.width 获得不包含 padding 和 border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值style 属性是可读写属性，style.width 可以获取也可以赋值
只想要获取元素大小位置的时候，用 offset 更合适要对元素样式进行修改的话，使用 style 更合适

案例一：实时展示鼠标的坐标-演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8" />
  5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. 		<title>鼠标位置获取-01</title>
  8. 		<style>
  9. 			.box {
  10. 				width: 500px;
  11. 				height: 500px;
  12. 				background-color: #55aaff;
  13. 				margin-left: 50px;
  14. 			}
  15. 		</style>
  16. 	</head>
  17. 	<body>
  18. 		<p>获取鼠标在盒子内坐标</p>
  19. 		<div class="box"></div>
  20. 		<script>
  21. 			// 在盒子中点击，想要获得鼠标距离盒子左右的距离
  22. 			// 实现：
  23. 			// 1. 获得鼠标在页面中的坐标，e.pageX, e.pageY
  24. 			// 2. 获得盒子到页面中的距离, box.offsetLeft, box.offsetTop
  25. 			// 3. 两者相减就能够获得鼠标在盒子中的坐标
  26. 			// 下面看实现过程吧！
  27. 			const box = document.querySelector(".box");
  28. 			box.addEventListener("mousemove", function(e) {
  29. 				// console.log(e.pageX, e.pageY);
  30. 				// console.log(box.offsetLeft, box.offsetTop);
  31. 				const x = e.pageX - this.offsetLeft;
  32. 				const y = e.pageY - this.offsetTop;
  33. 				box.textContent = `x: ${x}, y: ${y}`;
  34. 			});
  35. 		</script>
  36. 	</body>
  37. </html>

案例二：拖动模块-演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>模块拖动-02</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       .login,
  14.       .modal {
  15.         display: none;
  16.       }
  17.       .login {
  18.         width: 512px;
  19.         height: 280px;
  20.         position: fixed;
  21.         border: #ebebeb solid 1px;
  22.         left: 50%;
  23.         top: 50%;
  24.         background-color: #fff;
  25.         box-shadow: 0 0 20px #ddd;
  26.         z-index: 999;
  27.         transform: translate(-50%, -50%);
  28.         text-align: center;
  29.       }
  30.       .modal {
  31.         position: absolute;
  32.         top: 0;
  33.         left: 0;
  34.         width: 100vw;
  35.         height: 100vh;
  36.         background-color: rgba(0, 0, 0, 0.3);
  37.         z-index: 998;
  38.       }
  39.       .login-content {
  40.         margin: 100px auto;
  41.         text-align: center;
  42.       }
  43.       .login-content h3:hover,
  44.       .closeBtn:hover {
  45.         cursor: pointer;
  46.       }
  47.       .closeBtn {
  48.         position: absolute;
  49.         right: 10px;
  50.         top: 10px;
  51.       }
  52.       .login h4 {
  53.         margin-top: 10px;
  54.       }
  55.       .login h4:hover {
  56.         cursor: move;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div class="login-content">
  62.       <h3 id="openLogin">点击弹出模拟框</h3>
  63.     </div>
  64.     <div class="login">
  65.       <div class="closeBtn" id="closeBtn">关闭</div>
  66.       <h4 class="loginHeader">点击我拖动吧</h4>
  67.     </div>
  68.     <div class="modal"></div>
  69.     <script>
  70.       // 获取元素
  71.       const login = document.querySelector(".login");
  72.       const modal = document.querySelector(".modal");
  73.       const closeBtn = document.querySelector("#closeBtn");
  74.       const openLogin = document.querySelector("#openLogin");
  75.       // 点击显示元素
  76.       openLogin.addEventListener("click", () => {
  77.         modal.style.display = "block";
  78.         login.style.display = "block";
  79.       });
  80.       closeBtn.addEventListener("click", () => {
  81.         modal.style.display = "none";
  82.         login.style.display = "none";
  83.       });
  84.       // 实现拖拽移动功能
  85.       // 1. 鼠标按下获得鼠标在盒子内的坐标
  86.       const loginHeader = document.querySelector(".loginHeader");
  87.       loginHeader.addEventListener("mousedown", function (e) {
  88.         const x = e.pageX - login.offsetLeft;
  89.         const y = e.pageY - login.offsetTop;
  90.         const move = function (e) {
  91.           login.style.left = `${e.pageX - x}px`;
  92.           login.style.top = `${e.pageY - y}px`;
  93.         };
  94.         // 2. 移动鼠标
  95.         document.addEventListener("mousemove", move);
  96.         document.addEventListener("mouseup", function () {
  97.           document.removeEventListener("mousemove", move);
  98.         });
  99.       });
  100.     </script>
  101.   </body>
  102. </html>

 




所属网站分类: 技术文章 > 博客

作者：小猪佩奇身上纹

链接：http://www.qianduanheidong.com/blog/article/115767/af61f34cc1ce6dfd86aa/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

6 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

前端精选：在 WPF 中实现融合效果

程序人生：程序员如何实现财富自由？

找工作千万不要找外包？BAT互联网大厂外包亲身经历

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

如何使用 php 向电子邮件提交表单

将图像文件添加到 JSON 对象并在 HTML 中显示它？

Div 容器不会以百分比形式占据屏幕尺寸[重复]

如何在 angular 6 中在两个组件之间共享 http 响应？

为什么图像在 angular 2 中渲染效果不好

如何使用js跳过div？

css 网格的动态分配行高会随着内容的增加而拉伸

CSS 如何从底部向上增加高度

按数据值对列表项进行排序

以 json 或 html 形式返回数据库结果

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站