PC端网页特效-三大系列

1年前 (2021-09-19) 1004次浏览 已收录 0个评论

元素偏移量offset

使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
  • 返回的数值都不带单位

<script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果没有父亲或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
    </script>
结果演示

offset与style区别

offset

  • 可以得到任意样式表中的样式值
  • 只能获取,不能更改

style

  • 只能得到行内样式表中的样式值
  • 既能获取又能更改值

鼠标坐标案例

<script>
    var b=document.querySelector('.box');
    b.addEventListener('mousemove',function(e){
        var x= e.pageX-this.offsetLeft;
        var y= e.pageY-this.offsetTop;
        this.innerHTML='x坐标'+x+' y坐标'+ y;
    })
</script>
结果演示

模态框拖拽案例

分析:

  1. 点击弹出层,模态框和遮挡层就会显示出来display:block;
  2. 点击关闭按钮,模态框和遮挡框就会隐藏起来display:none;
  3. 页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标
  4. 触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup
  5. 拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值,这样模态框就好似跟着鼠标走了
  6. 鼠标按下去的坐标 减去 这个鼠标在盒子内的坐标,等于模态框的真正位置。
  7. 鼠标按下:得到鼠标在盒子的坐标
  8. 鼠标移动:让模态框的坐标设置为:鼠标坐标 减去 盒子坐标即可
  9. 鼠标松开:就停止拖拽,即解除鼠标移动事件
<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

用来获取元素的边框大小、元素大小等

立即执行函数

(funnction() {} )()  //不需要调用,立马就能自己执行的函数

作用:创建一个独立的作用域

写法:

  1. (function() {} ) ();
  2. (function() {} () );
<script>
        (function(a){
            console.log(a); //结果1
        })(1);  //第二个小括号可以看作是调用函数
    </script>

元素滚动scroll

可以动态的得到元素的实际大小、滚动距离等。

scroll也是滚动事件

注意:

元素内容被卷去(遮盖住)的头部是element.scrollTop

如果是整个页面被卷去的头部则是window.pageYOffset

测试

<script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滚动事件当我们滚动条发生变化会触发的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);
        })
    </script>
结果演示

侧边栏案例

<script>
        //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子,就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

        })
    </script>
结果演示

三大系列总结

  • offset系列经常用于获得元素位置 offsetLeft offsetTop
  • client系列经常用于获取元素大小 lientWidth clientHeight
  • scroll系列经常用于获取滚动的距离 scrollTop scrollLeft

 


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:PC端网页特效-三大系列
喜欢 (2)

您必须 登录 才能发表评论!