0
Follow
0
View

opencv graphics move

dai_feng0118 注册会员
2023-02-26 13:05

html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动矩形框title>
    <style>
        #rectangle {
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            top: 50px;
            left: 0px;
        }
    style>
head>
<body>
    <div id="rectangle">div>
    <script>
        var rectangle = document.getElementById("rectangle");
        var left = 0;
        var moveRight = true;

        function moveRectangle() {
            if (moveRight) {
                left++;
                rectangle.style.left = left + "px";
                if (left >= window.innerWidth - rectangle.offsetWidth) {
                    moveRight = false;
                }
            } else {
                left--;
                rectangle.style.left = left + "px";
                if (left <= 0) {
                    moveRight = true;
                }
            }
        }

        setInterval(moveRectangle, 10);
    script>
body>
html>


The initial position of the rectangle is set to the leftmost end. It uses absolute positioning and moves the rectangle by constantly changing the value of the left attribute. Use the setInterval() method to call the moveRectangle() function every once in a while, which determines how far the rectangle has moved and updates the value of the left property based on the direction and current position until the rectangle has moved to the far right or far left, changing the direction.

About the Author

Question Info

Publish Time
2023-02-26 13:05
Update Time
2023-02-26 13:05