実際にオブジェクト(カメラのフィード)を表示しています。 目標はGMAPアイテムと同じようにズームしてから移動することです。 GMAP ImageTilerを試しましたが、実際には期待通りに動かなかった。 それから私は自分自身でやろうとしましたが、私は実際にやっていることをやり遂げる別の方法(より良い/よりクリーンな方法)にも興味があります!このコードへズームした画像をdivに移動して別の部分を見る
$("#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);
}
}
});
<!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>
おかげで、私は、フィードを表示すると、かなりの部族の方法でそれをズームすることができています。 一度拡大(JQuery Mousewheelのおかげで、記事の最後にGitHubリンクがあります)、あふれているものを隠すことで、フィードの左上四分の一しか見ることができません。 最後のステップは、システムドラッグアンドドロップのおかげで、フィードをマウス(または電話を使用している場合はピンチ)で動かすことです。
実際、私はそれを行うことができません。 これを行うにはどうすればいいですか? 感謝:)
マウスホイール:https://github.com/jquery/jquery-mousewheel