在div中移動縮放圖像以查看另一部分

我實際上正在顯示一個對象（攝像頭提要）。目標是縮放，然後移動我的飼料，因爲我會做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鏈接），我只能通過隱藏溢出的內容來看到Feed的左上角四分之一。最後一步是，感謝系統拖放狀態，用鼠標移動Feed（或者如果使用手機，則用手捏住）。

事實是，我無法做到這一點。任何想法如何做到這一點？謝謝:)

鼠標滾輪：https://github.com/jquery/jquery-mousewheel

來源

2017-05-03 Badpoussin

這裏是我的我的問題的解決方案。有些事情必須糾正，但我們有縮放（捏或鼠標滾動），並拖動視頻飼料。

這是我的代碼。

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

希望它會幫助別人。

來源

2017-05-04 09:54:35 Badpoussin

在div中移動縮放圖像以查看另一部分

回答

相關問題