元素偏移量offset系列

1.1 offset概述

offset翻译过来，就是偏移量，我们使用offset系列相关属性，可以动态的得到该元素的位置（偏移）、大小等。

• 获取元素距离带有定位父元素的位置。
• 获得元素自身的大小（宽度高度）。
• 注意： 返回的数值都不带单位。

offset系列常用属性：

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级，如果父级都没有定位，则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

1.2 offset与style区别

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWIdth包含padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我么想要给元素更改值，则需要用style改变

1.3 拖拽模态框

案例分析：

1.点击弹出层，模态框和遮罩层就会显示出来display:block;

2.点击关闭按钮，模态框和遮罩层就会隐藏起来display:none;

3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标；

4.触发事件是鼠标按下mousedown,鼠标移动mousemove，鼠标松开mouseup；

5.拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了；

6.鼠标按下触发的事件源是最上面一行，就是id为title

7.鼠标的坐标减去鼠标在盒子里的坐标，才是模态框真正的位置。

 1 <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
 2         <div id="login" class="login">
 3             <div id="title" class="login-title">登录会员
 4                 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
 5             </div>
 6             <div class="login-input-content">
 7                 <div class="login-input">
 8                     <label>用户名：</label>
 9                     <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
10                 </div>
11                 <div class="login-input">
12                     <label>登录密码：</label>
13                     <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
14                 </div>
15             </div>
16             <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
17         </div>
18         <!-- 遮盖层 -->
19         <div id="bg" class="login-bg"></div>
20
21         <script>
22             // 获取元素
23             var login = document.querySelector('.login');
24             var mask = document.querySelector('.login-bg');
25             var link = document.querySelector('#link');
26             var closeBtn = document.querySelector('#closeBtn');
27             var title = document.querySelector('#title');
28             // 2.点击弹出层这个链接link，让mask和login显示出来
29             link.addEventListener('click', function(){
30                 mask.style.display = 'block';
31                 login.style.display = 'block';
32             });
33             // 3. 点击closeBtn就隐藏mask和login
34             closeBtn.addEventListener('click', function() {
35                 mask.style.display = 'none';
36                 login.style.display = 'none';
37             });
38             // 4.开始拖拽
39             // （1）当我们鼠标按下，就获得鼠标在盒子里的坐标
40             title.addEventListener('mousedown', function(e){
41                 var x = e.pageX - login.offsetLeft;
42                 var y = e.pageY - login.offsetTop;
43                 // (2)鼠标移动的时候，把鼠标在页面的坐标，减去鼠标在盒子里的坐标，就是模态框的left和top
44                 document.addEventListener('mousemove', move);
45                 function move(e) {
46                     login.style.left = e.pageX - x + 'px';
47                     login.style.top = e.pageY - y + 'px';
48                 };
49                 // 鼠标弹起，就让鼠标移动事件移除
50                 document.addEventListener('mouseup', function() {
51                     document.removeEventListener('mousemove' , move)
52                 })
53             })
54         </script>

京东放大镜效果：

 1 window.addEventListener('load', function() {
 2     var preview_img = document.querySelector('.preview_img');
 3     var mask = document.querySelector('.mask');
 4     var big = document.querySelector('.big');
 5     // 1.当我们鼠标经过preview_img就显示和隐藏mask遮罩层和big大盒子
 6     preview_img.addEventListener('mouseover', function() {
 7         mask.style.display = 'block';
 8         big.style.display = 'block';
 9     });
10     preview_img.addEventListener('mouseout', function() {
11         mask.style.display = 'none';
12         big.style.display = 'none';
13     });
14     // 2.鼠标移动的时候，让黄色盒子跟着鼠标来走
15     preview_img.addEventListener('mousemove', function(e) {
16         // (1).先计算出鼠标在盒子里的坐标
17         var x = e.pageX - this.offsetLeft;
18         var y = e.pageY - this.offsetTop;
19         // (2).减去盒子高度 300的一半 是150就是我们mask的最终 left和top值了
20         // (3).我们mask移动的距离
21         var maskX = x - mask.offsetWidth / 2;
22         var maskY = y - mask.offsetHeight / 2;
23         // (4). 如果x坐标小于0， 就让他停在0的位置
24         // 遮罩层的最大移动距离
25         var maskMax = preview_img.offsetWidth - mask.offsetWidth;
26         if(maskX <= 0) {
27             maskX = 0;
28         } else if (maskX >= maskMax) {
29             maskX = maskMax;
30         }
31         if (maskY <= 0) {
32             maskY = 0;
33         } else if (maskY >= maskMax) {
34             maskY = maskMax;
35         }
36         mask.style.left = maskX + 'px';
37         mask.style.top = maskY + 'px';
38         // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
39         var bigImg = document.querySelector('.bigImg');
40         // 大图片的移动距离
41         var bigMax = bigImg.offsetHeight - big.offsetWidth;
42         // 大图片的移动距离
43         var bigX = maskX * bigMax / maskMax;
44         var bigY = maskY * bigMax / maskMax;
45         bigImg.style.left = -bigX + 'px';
46         bigImg.style.top = -bigY + 'px';
47     })
48 })