Breaking News: Grepper is joining You.com. Read the official announcement!

zoom image inside div and move

Weary Wildebeest answered on December 26, 2021 Popularity 8/10 Helpfulness 4/10

answer zoom image inside div and move

related zoom image inside div and move

zoom image inside div and move

Comment

<!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

Popularity 8/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: image move whatever

Link to this answer
Share Copy Link

Contributed on Dec 26 2021

Weary Wildebeest

0 Answers Avg Quality 2/10

Closely Related Answers

zoom image inside div and move

Comment

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

Popularity 8/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css image

Link to this answer
Share Copy Link

Contributed on Dec 26 2021

Weary Wildebeest

0 Answers Avg Quality 2/10

zoom image inside div and move

Comment

$("#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;
    }

Popularity 8/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: image move

Link to this answer
Share Copy Link

Contributed on Dec 26 2021

Weary Wildebeest

0 Answers Avg Quality 2/10

zoom image inside div and move

Contents

More Related Answers

zoom image inside div and move

Closely Related Answers

zoom image inside div and move

zoom image inside div and move

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.