js的pc端网页特效

最新推荐文章于 2024-07-26 20:46:33 发布

虚诚

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量117

点赞数

文章标签： javascript css3 css

本文链接：https://blog.csdn.net/qq_43614064/article/details/108465026

版权

js的pc端网页特效

一.元素偏移量offset系列

一.元素偏移量offset系列

1.offset概述

在这里插入图片描述

获取元素距离带有定位父类的位置
获取元素自身的大小（宽，高）
返回的数值都不带单位
小例子，两个盒子打印出他们的offsetTop和offsetLeft（位置）

 <style>
            *{
                margin: 0;
                padding: 0;
             }
        .father{
            position: relative;
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px;
                }
        .son
            {
             width: 100px;
             height: 100px;
             background-color: purple;
             margin-left: 45px;}
        </style>
       
    </head>
    <body>
  <div class="father" >
    <div class="son"></div>
  </div>
 
        <script>
            var son=document.querySelector('.son');
           var father=document.querySelector('.father');
          console.log(father.offsetTop);
          console.log(father.offsetLeft);
          //他以带有定位的父亲为准，如果没有父亲或父亲没有定位，以body为准
          console.log(son.offsetLeft);
          
         </script>
    </body>

offsetWidth，offsetHeight（大小）

       <style>
  .w{
           
                width: 200px;
                height: 200px;
                background-color:blue;
                margin:0 auto 200px;
                padding: 10px;
                border: 15px solid red;
                }
        </style>
        <body>
        <div class="w"></div>
        <script>
          var w=document.querySelector('.w');
          console.log(w.offsetWidth);
          console.log(w.offsetHeight);
         </script>

offsetParent（返回带有定位的父亲）

 console.log(son.offsetParent);//返回带有定位的父亲，否则返回的是body
          console.log(son.parentNode);//返回的是最近一级的父亲，不管有没有定位

1.2offset与style的区别

在这里插入图片描述
案例：获取鼠标在盒子里的坐标

 <style>
          .box{
              width: 300px;
              height: 300px;
              margin: 100px;
              background-color: pink;
          }
        </style>
       
    </head>
    <body>
       <div class="box"></div>
        <script>
           var box=document.querySelector('.box');
          box.addEventListener('click',function(e){
              var x=e.pageX-this.offsetLeft;
               var y=e.pageY-this.offsetTop;
               this.innerHTML='X的坐标是'+x+',y的坐标是'+y; })
                   
         </script>
    </body>

1.3模态框案例

点击登陆显示出登陆框，点击关闭，登陆框隐藏，鼠标按下移动登录框

以下是js部分代码，

 <script>
        // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>

完整代码点这里

二.元素可视区client系列

在这里插入图片描述

clientWidth与offsetWidth的区别就是，clientWidth不包括边框border的值，但包含padding的值
例：

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #000;
            border: 10px solid red;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script>
    var div = document.querySelector('div');
    console.log(div.clientWidth);
</script>

</html>