[TOC] # 1.1 offset概述 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 ●获得元素距离带有定位父元素的位置 ●获得元素自身的大小(宽度高度) ●注意:返回的数值都不带单位 offset系列常用属性: | offset系列属性 | 作用 | | --- | --- | | element.offsetParent (元素的属性) | 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body | | element.offsetTop | 返回元素相对带有定位父元素上方的偏移 | | element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 | | element.offsetWidth | 返回自身包括padding、边框、 内容区的宽度，返回数值不带单位 | | elementoffsetHeight | 返回自身包括padding.边框、内容区的高度,返回数值不带单位 | # 1.2 offset与style区别 （获取元素大小位置,用offset更合适；元素更改值,用style改变）  # 案例:获取鼠标在盒子内的坐标 （放大镜 开发 重点） ## 案例分析 ①我们在盒子内点击,想要得到鼠标距离盒子左右的距离。 ②首先得到鼠标在页面中的坐标( e.pageX, e.pageY ) ③其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) ④用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标 ⑤如果想要移动一下鼠标 ,就要获取最新的坐标,使用鼠标移动事件mousemove ## 代码实验 ~~~ <div class="box"></div> <script> //我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。 //首先得到鼠标在页面中的坐标( e. pageX, e. pageY) //其次得到盒子在页面中的距离(box . offsetLeft, box. offsetTop) //用鼠标距离页面的坐标减去盒子在页面中的距离， 得到鼠标在盒子内的坐标 var box = document.querySelector(' .box' ); box.addEventListener( ' mousemove'，function(e) { // console.log(e.pageX); //获得鼠标滑过盒子的坐标 // console.log(e.pageY); // console.log( box.offsetLeft);//获得盒子的坐标 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this. innerHTML = 'x坐标是' + x + ' y坐标是' + y; }) </script> ~~~ # 案例:模态框拖拽 （可弹出的登录界面）  ## 案例分析 弹出框,我们也称为模态框。 1.点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。 4.鼠标松开,可以停止拖动模态框移动。 ## 案例分析 案例分析 ①点击弹出层，模态框和遮挡层就会显示出来display:block; ②点击关闭按钮，模态框和遮挡层就会隐藏起来display:none; ③在页面中拖拽的原理:鼠标按下并且移动，之后松开鼠标 ④触发事件是鼠标按下mousedown,鼠标移动mousemove鼠标松开mouseup ⑤拖拽过程:鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可 以跟着鼠标走了 ⑥鼠标按下触发的事件源是最上面- -行，就是id为title ⑦鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。 ⑧鼠标按下，我们要得到鼠标在盒子的坐标。 ⑨鼠标移动，就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。 鼠标松开,就停止拖拽，就是可以让鼠标移动事件解除 ## 实验代码  # 案例:仿京东放大镜 （重点 开发常用）  ## 样式代码 （） 基本样式调完后，输入display:none;  旁边的显示图  # 案例分析 ①整个案例可以分为三个功能模块 ②鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能 ③黄色的遮挡层跟随鼠标功能。 ④移动黄色遮挡层,大图片跟随移动功能。  ## 鼠标在盒子距离计算（父亲没有定位）（重点）  ~~~ // 2.鼠标移动的时候，让黄色的盒子跟着鼠标来走 preview_ img.addEventL istener( ' mousemove', function(e) { //(1).先计算出鼠标在盒子内的坐标 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // console.log(X, y); // (2) 减去盒子高度300的一半是150就是我们mask的最终left 和top值了 mask.style.left = x- mask.offsetWidth / 2 + ' px' ; //鼠标在放大镜中央 重点 mask.style.top = y - mask.offsetHeight / 2 + 'px ' ; //鼠标在放大镜中央 重点 }) ~~~ ## 鼠标的放大镜固定在盒子内部 （重点） ~~~ var maskX = X - mask . offsetWidth / 2; var maskY = y - mask .offsetHeight / 2; // (4) 如果x坐标小于了0就让他停在0的位置 if (maskX <= 0) { maskX = 0; } else if (maskX >= preview_ img.offsetWidth - mask.offsetWidth) { maskX = preview_ img.offsetWidth - mask.offsetWidth; } if(maskY <= 0) { maskY = 0; }else if (maskY >= preview_ img.offsetHeight - mask.offsetHeight) { maskp=review_ img.offsetHeight - mask.offsetHeight ; } mask.style.left = maskX +'px'; mask.style.top = maskY + ' px ' ; }) ~~~ ## 代码实验 ### 1、  ### 2、黄色盒子跟鼠标走  ### 3、把鼠标放大镜固定在和盒子  下面修改  ### 4、大图片同步移动