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

0 vote225 views1 answer
Mysql_config not found
CSS
22 votes273 views6 answers
Blur css
CSS
0 vote185 views1 answer
Add padding to gnome terminal
CSS
0 vote166 views1 answer
Bootstrap accessibility
CSS
0 vote241 views1 answer
Inline block and 50% width not aligning items
CSS
0 vote281 views1 answer
Operador css contain attr
CSS
23 votes192 views2 answers
Center align in grid
CSS
0 vote186 views1 answer
Css tutorial point
CSS
0 vote180 views1 answer
How to use * in html
CSS
29 votes195 views6 answers
BackgroundImage react
CSS