• 元素偏移量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 })
  • 相关阅读:
    SQL Server连接Oracle详细步骤
    SQLServer2012连接mysql5.5
    SQL Server的链接服务器技术
    2键盘录入Scanner
    1标识符
    电脑从新分盘(软件)
    Tomcat安装配置
    windows下安装和配置多个版本的JDK
    Myeclipse2014的安装
    Could not find acceptable representation
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/12992769.html
Copyright © 2020-2023  润新知