Zoom image inside div and move

$("#videoContainer").css('height', $('#stream').height());
    $("#videoContainer").css('width', $('#stream').width());

    $('#videoContainer').on('mousewheel', function (event) {
        var height = $('#stream').height();
        var width = $('#stream').width();

        if (height == 480 && width == 640 && event.deltaY > 0) {
        } else {
            if (event.deltaY > 0) {
                height /= 2;
                width /= 2;
                $("#stream").css('height', height);
                $("#stream").css('width', width);
            }
            else if (event.deltaY < 0) {
                height *= 2;
                width *= 2;
                $("#stream").css('height', height);
                $("#stream").css('width', width);
            }
        }
    });

    function startDrag(e) {
        if (!e) {
            var e = window.event;
        }

        var targ = e.target ? e.target : e.srcElement;

        if (targ.className !== 'dragme') {
            return
        }
        offsetX = e.clientX;
        offsetY = e.clientY;

        if (!targ.style.left) {
            targ.style.left = '0px'
        }
        if (!targ.style.top) {
            targ.style.top = '0px'
        }
        coordX = parseInt(targ.style.left);
        coordY = parseInt(targ.style.top);
        drag = true;

        document.onmousemove = dragDiv;
        return false;
    }
    function dragDiv(e) {
        if (!drag) {
            return
        }
        if (!e) {
            var e = window.event
        }
        var targ = e.target ? e.target : e.srcElement;
        // move div element
        targ.style.left = coordX + e.clientX - offsetX + 'px';
        targ.style.top = coordY + e.clientY - offsetY + 'px';
        return false;
    }
    function stopDrag() {
        drag = false;
    }
    window.onload = function () {
        document.onmousedown = startDrag;
        document.onmouseup = stopDrag;
    }

Source: stackoverflow.com

Zoom image inside div and move

.dragme{
    position:relative;
    width: 270px;
    height: 203px;
    cursor: move;
}

Source: stackoverflow.com

Zoom image inside div and move

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <link href="css.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="Mousewheel/jquery.mousewheel.min.js"></script>
</head>
<body>
<div id="videoContainer" style="overflow:hidden;">
    <img id="stream" class="dragme" alt="Camera is loading"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png">
</div>
</body>
</html>
 Run code snippet

Source: stackoverflow.com

Similar codes

1 vote152 views1 answer
Cmd hash file
CSS
3 votes151 views2 answers
Button material ui
CSS
2 votes150 views1 answer
Give transition on box shadow
CSS
0 vote153 views1 answer
Textbreak for long text
CSS
0 vote140 views1 answer
Remove onclick highlight from anchor tag when opened in mobile
CSS
0 vote154 views1 answer
Code to change size when hover effect
CSS
0 vote152 views1 answer
Tailwind css flex-row-reverse for grid reverse
CSS
5 votes138 views3 answers
Keep background image fixed during scroll using css
CSS
-2 votes159 views1 answer
How to add after psuedo class in html
CSS
0 vote114 views1 answer
Github-pages main.css cancel
CSS