css的定位关于运功的快慢

最新推荐文章于 2023-02-27 21:13:54 发布

wildb--辉

最新推荐文章于 2023-02-27 21:13:54 发布

阅读量188

点赞数 2

文章标签： css 前端 javascript html css3

本文链接：https://blog.csdn.net/gkhchongbuweiju/article/details/126083897

版权

在css中我们可以让模块通过循环的方式运动起来，通过

setInterval(function(){
	element.style.left=element.offsetLeft+5+'px'
},50)

代码模板来让代码运动起来可模块在不同的position下的运动速度是不同的

请看下面的例子

先准备一个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块运动</title>
    <style>
        .box {
            position: ;
            left: 0;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

在position：absolute;下的盒子运行时间

<script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 400) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 5 + 'px'
            }
        }, 50)
    </script>

在position:fiexd;下运行的速度

    <style>
        .box {
            position: fixed;
            left: 0;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

 <script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 400) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 5 + 'px'
            }
        }, 50)
    </script>

相比较而言absolute与fiexd的运行速度没有太大的区别是是有稍微的一点点区别，但都稳定在4050毫秒左右；

在不同的浏览器下我也经过了测试大部分都在4050毫秒左右；让我们在看看第三种

在position:sticky;中

<style>
        .box {
            position: sticky;
            left: 0;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

<script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 400) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 5 + 'px'
            }
        }, 50)
    </script>

从数据来看，sticky稍微比前两种定位的速度快了那么一些将近在4000毫秒左右；再看第四种

在position:relative;中

 <style>
        .box {
            position: relative;
            left: 0;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

<script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 400) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 5 + 'px'
            }
        }, 50)
    </script>

相比于其他的两个定位属性，relative在运动过程中的速度是尤其的快，这可能是在每次增加的5px时间上加快了速度。因此我做了以下测试

1.每次运动5px

 <script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 1000) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 10 + 'px'
            }
        }, 50)
    </script>

2.每次运动10px

 <script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 1000) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 10 + 'px'
            }
        }, 50)
    </script>

3.每次运动100px

 <script>
        var box = document.querySelector('.box');
        var new1 = +new Date();
        var tiems = setInterval(function() {
            if (box.offsetLeft >= 1000) {
                clearInterval(tiems);
                var new2 = +new Date();
                var newset = new2 - new1;
                console.log(newset);
            } else {
                box.style.left = box.offsetLeft + 100 + 'px'
            }
        }, 50)
    </script>

上面三个代码分别对应着的速度为