jq动画

html

<!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>Document</title>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: content-box;
    }
    html{
        min-height: 100vh;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #box {
        height: 300px;
        width: 400px;
        box-shadow: 0 0 5px 5px #000;
    }
    .progress {
        width: 250px;
        height: 50px;
        display: flex;
    }
    .progress-parent{
        width: 200px;
        height: 20px;
        position: relative;
        background-color: #eee;
    }
    .progress-left-child{
        width: 0;
        height: 100%;
        position: absolute;
        left: 0;
        background-color: rgb(5, 243, 5);
    }
    .progress-right-child{
        width: 0;
        height: 100%;
        position: absolute;
        right: 0;
        background-color: rgb(5, 243, 5);
    }
    .progress-left{
        position: absolute;
        font-size: 12px;
        left: 0;
        width: 50px;
    }
    .progress-right{
        position: absolute;
        font-size: 12px;
        right: 0;
        width: 50px;
    }
</style>
<body>
    <div id="box">

    </div>
    <script src="./jquery.min.js"></script>
    <script src="./main.js"></script>
</body>
</html>

javascript

let arr = [{
    id: 0,
    gid: 1,
    name: 'test1',
    value: 0
}, {
    id: 1,
    gid: 2,
    name: 'test2',
    value: 0
}]
setInterval(function () {
    arr.forEach(function (value) {
        if (value.id == '0') {
            leftAnimation(value.gid, value.value, 'box');
        } else {
            rightAnimation(value.gid, value.value, 'box');
        }
    })
    arr[0].value += 10;
    arr[1].value += 10;
}, 2000);

function leftAnimation(id, value, parentId) {
    if ($("#progress" + id).length == 0) {
        let str = '<div id="progress' + id + '"><div class="progress">内<div class="progress-parent"><div class="progress-left-child"></div><div class="progress-left">> > > ></div></div>外</div></div>';
        $("#" + parentId).append(str);
        let progressPositionLeft = {
            left: 0,
        };
        infiniteWidthLeft();
        function infiniteWidthLeft() {
            $("#progress" + id + " .progress-left").css("left", "0");
            progressPositionLeft.left = '100%';
            $("#progress" + id + " .progress-left").animate(progressPositionLeft, 2000, infiniteWidthLeft);
        }
    }
    let progressWidthLeft = {
        width: value + '%'
    };
    if (value <= 100) {
        $("#progress" + id + " .progress-left-child").animate(progressWidthLeft, 1000);
    } else {
        $("#progress" + id + " .progress-left").stop();
        $("#progress" + id + " .progress-left").css("left", "0");
    }
}
function rightAnimation(id, value, parentId) {
    if ($("#progress" + id).length == 0) {
        let str = '<div id="progress' + id + '"><div class="progress">内<div class="progress-parent"><div class="progress-right-child"></div><div class="progress-right">< < < <</div></div>外</div></div>';
        $("#" + parentId).append(str);
        let progressPositionRight = {
            right: 0,
        };
        infiniteWidthLeft();
        function infiniteWidthLeft() {
            $("#progress" + id + " .progress-right").css("right", "0");
            progressPositionRight.right = '100%';
            $("#progress" + id + " .progress-right").animate(progressPositionRight, 2000, infiniteWidthLeft);
        }
    }
    let progressWidthRight = {
        width: value + '%'
    };

    if (value <= 100) {
        $("#progress" + id + " .progress-right-child").animate(progressWidthRight, 1000);
    } else {
        $("#progress" + id + " .progress-right").stop();
        $("#progress" + id + " .progress-right").css("right", "0");
    }
}

版权属于：小小窝/禾下月
本文链接：https://hxyxyz.top/index.php/Web/331.html
本站文章采用知识共享署名4.0 国际许可协议进行许可，请在转载时注明出处及本声明！

hxy

留下你的评论