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 })