Question

我实际上正在显示一个对象（相机提要）。我的目标是缩放然后移动我的Feed，就像我对GMAP项目一样。我试过GMAP ImageTiler，但它并没有按预期工作。然后我尝试自己做，但我也有兴趣通过另一种方式（一种更好/更清洁的方式）去做我真正做的事情！

＆＃13;

$("#videoContainer").css('height', 480);
    $("#videoContainer").css('width', 640);

    $('#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);
                console.log(height, width);
            }
            else if (event.deltaY < 0) {
                height *= 2;
                width *= 2;
                $("#stream").css('height', height);
                $("#stream").css('width', width);
                console.log(height, width);
            }
        }
    });

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <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" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png">
</div>
</body>
</html>

＆＃13;

感谢此代码，我能够以非常部落的方式显示Feed并进行缩放。一旦缩放（感谢JQuery Mousewheel，帖子末尾的GitHub链接），我只能通过隐藏溢出的内容来查看Feed的左上角四分之一。最后一步是，由于系统拖拽式，用鼠标移动进给（或者如果使用手机则捏合）。

事实是，我无法做到这一点。知道怎么做这个人吗？谢谢:)）

鼠标滚轮：https://github.com/jquery/jquery-mousewheel

Answer 1

这是我解决问题的方法。有些事情必须纠正，但我们有缩放（捏或鼠标滚动）并拖动视频输入。

这是我的代码。

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

.dragme{
    position:relative;
    width: 270px;
    height: 203px;
    cursor: 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>

希望它会对某人有所帮助。

在div中移动缩放图像以查看其他部分

1 个答案: