2017-05-03 9 views
0

実際にオブジェクト(カメラのフィード)を表示しています。 目標は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

答えて

0

は、ここに私の問題のために私のソリューションです。 修正が必要なことがありますが、ズーム(ピンチまたはマウスのスクロール)してビデオフィードをドラッグしています。

ここに私のコードです。

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

それが誰かを助けることを願っています。

関連する問題