时间戳

首页 > 解决方案 > 单击按钮更改图像位置

javascript - 单击按钮更改图像位置

问题描述

我不太了解编码，但我希望能够做到，所以当我单击“测试”按钮之一时，图像会移动。我希望它是一个变量，以便它不断检查变量（我不知道如何使用变量），并且在任何给定时刻，当变量 = 数字时，它位于我指定的特定位置。当我单击测试 1 时，该变量会增加 1，当我单击测试 2 时，它会减少 1。在从 0 到 10 的任何给定变量中，每个数字都应该有一个特定的位置。并且一旦变量达到 11，变量将立即重置为 0，就像在循环中一样。它可以包括 HTML、CSS 和 Javascript，如果这令人困惑，对不起，我真的是编码的菜鸟 :(

这是我到目前为止的所有代码，它确实没有帮助，但我想我还是应该添加它。

<img id="img01" src="https://cdn.shopify.com/s/files/1/0080/8372/products/tattly_triangle_yoko_sakao_ohama_00_1200x1200.png?v=1575322215" height="300">

<button id="test1" type="button">test 1</button>
<button id="test2" type="button">test 2</button>

感谢您的任何帮助 ：）

标签： javascripthtmlcssvariablesposition

解决方案

看看下面的代码。我希望这个例子能帮助你理解块移动原理。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>moved image</title>
    </head>
    <body>
        <div class="wrapper">
            <div>
                <img class="image" src="" width="50" style="left: 200px;">
            </div>
        </div>

        <button class="button" type="button" id="left-button" onclick="moveLeft()">Left</button>
        <button class="button" type="button" id="right-button" onclick="moveRight()">Right</button>

        <style>
            .wrapper {
                position: relative;
                width: 500px;
                min-height: 200px;
                background-color: yellow;
            }

            .image {
                position: absolute;
                top: 40px;
                width: 100px;
                height: 70px;
                background-color: blue;
            }
        </style>

        <script>
            'use strict'

            const getNumber = function(str) {
                return parseInt(str, 10);
            }

            const transformToString = function(num) {
                return num + 'px';
            }

            const SHIFT = 10;   
            const MARGIN = 10;
            const element = document.querySelector('.image');
            const LEFT_MARGIN = getNumber(element.style.left) - SHIFT * MARGIN;
            const RIGHT_MARGIN = getNumber(element.style.left) + SHIFT * MARGIN;

            const moveLeft = function() {
                if (getNumber(element.style.left) > LEFT_MARGIN) {
                    element.style.left = transformToString(getNumber(element.style.left) - SHIFT);
                }
            }

            const moveRight = function() {
                if (getNumber(element.style.left) < RIGHT_MARGIN) {
                    element.style.left = transformToString(getNumber(element.style.left) + SHIFT);
                }
            }
        </script>  
    </body>
</html>

推荐阅读