元素偏移量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 })