html中，实现通过拖拽调整图像尺寸

news2024/12/24 20:40:40

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html中拖拽修改图像尺寸</title>
<style>
  #imageContainer {
    position: relative;
    display: inline-block;
  }
  #resizeHandle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nw-resize;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 20px;
  }
  img {
    display: block;
    max-width: 100%;
  }


    .zoom {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #fff;
        border: 1px solid #2298ff;
        border-radius: 50%;
        display: none;
    }

        .zoom.up-left {
            margin-top: -5px;
            margin-left: -5px;
            cursor: nw-resize;
            top: 0;
        }

        .zoom.up {
            left: 50%;
            margin-left: -5px;
            top: -5px;
            cursor: n-resize;
        }

        .zoom.up-right {
            top: -5px;
            right: -5px;
            cursor: ne-resize;
        }

        .zoom.right {
            top: 50%;
            margin-top: -5px;
            right: -5px;
            cursor: e-resize;
        }

        .zoom.right-down {
            right: -5px;
            bottom: -5px;
            cursor: se-resize;
        }

        .zoom.down {
            bottom: -5px;
            left: 50%;
            margin-left: -5px;
            cursor: s-resize;
        }

        .zoom.left-down {
            left: -5px;
            bottom: -5px;
            cursor: sw-resize;
        }

        .zoom.left {
            left: -5px;
            top: 50%;
            margin-top: -5px;
            cursor: w-resize;
        }

    .active {
        border: 2px solid #f00;
    }

</style>
</head>
<body>
 
    <div id="imageContainer" class="active">
        <img src="http://localhost:51190//upload/exam/paper/20241210/b211681f38514f56ab933ea6152ad808.png?_t=20241210165544?t=10000" alt="Resizable Image">
        <!--<div id="resizeHandle">◢</div>-->

        <div class="zoom right-down" style="display: block;"></div>

        <!--<div class="zoom up-left" style="display: block;"></div>
        <div class="zoom up" style="display: block;"></div>
        <div class="zoom up-right" style="display: block;"></div>
        <div class="zoom right" style="display: block;"></div>
        <div class="zoom down" style="display: block;"></div>
        <div class="zoom left-down" style="display: block;"></div>
        <div class="zoom left" style="display: block;"></div>-->
    </div>
 
<script>
    // JavaScript to make the resize handle draggable and resize the image
    //const handle = document.getElementById('resizeHandle');

    const image = document.querySelector('#imageContainer img');
    let isResizing = false;
    let startX;
    let startY;
    let startWidth;
    let startHeight;

    //handle.addEventListener('mousedown', function(e) {
    //  isResizing = true;
    //  startX = e.clientX;
    //  startY = e.clientY;
    //  startWidth = parseInt(getComputedStyle(image).width, 10);
    //  startHeight = parseInt(getComputedStyle(image).height, 10);
    //});

    document.querySelector('.zoom').addEventListener("mousedown", function (e) {//菜单点击时,防止误拖拽
        isResizing = true;
        startX = e.clientX;
        startY = e.clientY;
        startWidth = parseInt(getComputedStyle(image).width, 10);
        startHeight = parseInt(getComputedStyle(image).height, 10);
    });
 
    document.addEventListener('mousemove', function(e) {
        if (isResizing) {
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;
            image.style.width = (startWidth + deltaX) + 'px';
            image.style.height = (startHeight + deltaY) + 'px';
        }
    });
 
    document.addEventListener('mouseup', function() {
        isResizing = false;
    });
</script>
 
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2257692.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！