DOM特效

最新推荐文章于 2023-02-20 15:54:20 发布

遇上日落

最新推荐文章于 2023-02-20 15:54:20 发布

阅读量121

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_63639281/article/details/126592140

版权

第一节：模态框拖拽

1. offset 偏移量

offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

- offset 可以得到任意样式表中的样式值

- offset 系列获得的数值是没有单位的

- offsetWidth 包含padding+border+width

- offsetWidth 等属性是只读属性，只能获取不能赋值

- offsetLeft 返回相对于父元素左边框的距离,动态的。

- offsetTop 返回相对于父元素上方的举例

1.2 offset 与 style 区别

- offsetWidth 数值是没有单位的

- offsetWidth 包含padding+border+width

- offsetWidth 只读属性，只能获取不能赋值

- style.width 获得的是带有单位的字符串，只获取行内样式。

- style.width 获得不包含padding和border 的值

- style.width 是可读写属性，可以获取也可以赋值

总结：获取元素位置用offset ,修改元素属性值用style

1.3 获取鼠标在盒子内的坐标

var box = document.querySelector('.box');

box.addEventListener('mousemove', function(e) {

var x = e.pageX - this.offsetLeft;

var y = e.pageY - this.offsetTop;

this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;

})

1.4 拖拽原理

1：mousedown 鼠标按压获取鼠标在登录框的宽度。

2：mousemove 鼠标移动的时获取最新的pageX减去鼠标在登录框的X距离，就是模态框的left与top值。

3：mouseup 鼠标松开时，移除mousemove 事件

第二节：client概述

通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

clientTop ：元素上边框大小

clientLeft ：元素左边框大小

clientWidth：包括padding，不包括边框。

clientHeight：包括padding，不包括边框。

// client 宽度和我们offsetWidth 最大的区别就是不包含边框

var div = document.querySelector('div');

console.log(div.clientWidth);

第三节：scroll 概述

我们使用 scroll 的相关属性可以动态的得到该元素的大小、滚动距离等。

scrollTop：被滚动的上侧距离，返回数值，不带单位；

scrollLeft：被滚动的左侧距离，返回数值，不带单位；

scrollWidth：返回元素实际宽度，包括滚动的距离，不含边框，返回数值不带单位。

scrollHeight：返回元素实际高度，包括滚动的距离，不含边框，不带单位。

第四节：总结

1.offset系列经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得

核心原理：通过定时器 setInterval() 不断对容器进行处理。

小练习：

1.代码向下的时候，一直会出现

 <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #box {
            width: 200px;
            height: 200px;
            overflow-y: scroll;
        }
      
    </style>
</head>

<body>
    <div id="box">
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
    </div>

</body>

<script>
   

    var boxs = document.querySelector("#box")
    boxs.addEventListener("scroll", function () {

        var scrollHeight = this.scrollHeight
        var clientHeight = this.clientHeight
        var scrollTop = Math.ceil(this.scrollTop)

        if (scrollTop + clientHeight >= scrollHeight) {
            //创建节点
            var pnode = document.createElement("p")
            pnode.innerHTML = "还有你好"
            boxs.appendChild(pnode)
        }
    })
</script>