使用javascript移動css縮放的div

我已經發布我的問題在http://jsfiddle.net/ugnf4/，因爲它會使它更容易。使用javascript移動css縮放的div

下面是我的HTML/JavaScript代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
</head> 
<body> 
<div id="mainContainer"> 
<div id="pageContainer" style="background: #cdcdcd;"></div> 
</div> 
<style> 
    BODY { 
     margin: 0px; 
     padding: 0px; 
    } 
    #pageContainer { 
     position: relative; 
     margin: 10px auto; 
     -webkit-transform-origin:50% 20%; 
     -webkit-transform:scale(1.37); 
     width: 1218px; 
     height: 774px; 
     border: 1px solid #000000; 
    } 
    #mainContainer { 
     width: 100%; 
     overflow: hidden; 
    } 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</script> 

<script type="text/javascript"> 

$(document).ready(function() { 
    setHeight(); 

    $(window).resize(setHeight); 
}); 


function setHeight() 
{ 
    $('#mainContainer').css({'height': $(window).height()}); 
} 

$('#mainContainer').mousemove(function (e) { 

}); 

</script> 

</body> 
</html>

目前#mainContainer div有overflow hidden，因爲我不想讓系統根據屏幕滾動條和#pageContainer DIV (inner div)使用CSS3 1.37縮放，在某些情況下/瀏覽器寬度高度#pageContainer's內容將因爲overflow hidden而被隱藏。

我想編寫JavaScript代碼，這樣，如果有人在#mainContainer根據鼠標的X和Y座標的位置移動光標，我想移動#pageContainer的#pageContainer，這樣類似的立場將是可見的（我希望這是明確的）。

我在使用-webkit-transform-origin時遇到了問題，無法理解如何在#mainContainer的鼠標座標上移動#pageContainer。

UPDATE：

我正在尋找類似的東西在issuu.com網站，當你打開一本電子書，並放大比瀏覽器大小的更多（應該更清楚）

我要找的會發生什麼算法或指針如何實現它（如何計算）不一定是一個工作腳本。

這是如何實現的。

以下工作HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
</head> 
<body> 
<div id="mainContainer"> 
<div id="pageContainer" > 
<div id="pageContainerInner"style="background: #cdcdcd;"> 
</div> 
</div> 
<style> 
    BODY { 
     margin: 0px; 
     padding: 0px; 
    } 
    #pageContainer { 
     margin: 10px auto; 
     -webkit-transform-origin:50% 20%; 
     -webkit-transform:scale(1.37); 
     width: 1218px; 
     height: 774px; 
    } 
    #mainContainer { 
     width: 100%; 
     overflow: hidden; 
    } 

    #pageContainerInner { 
     position: relative; 
     width: 1218px; 
     height: 774px; 
     border: 1px solid #000000; 
     top: 0; 
     left: 0; 
    } 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</script> 

<script type="text/javascript"> 

var pageWidth = 1220; 
var pageHeight = 776; 

var scale = 1.37; 

var scaledDelta = 5; //Percentage mouse position approximation 

$(document).ready(function() { 
    setHeight(); 

    $(window).resize(setHeight); 
}); 


function setHeight() 
{ 
    $('#mainContainer').css({'height': $(window).height()}); 
} 

$('#mainContainer').mousemove(function (e) { 

    // Calculate the offset of scaled Div 
    var offsetX = $('#pageContainer').offset().left; 
    var offsetY = $('#pageContainer').offset().top; 

    // Calculate div origin with respect to screen 
    var originX = (-1 * offsetX)/scale; 
    var originY = (-1 * offsetY)/scale; 

    var wWdt = $(window).width(); 
    var wHgt = $(window).height(); 

    // Now convert screen positions to percentage 
    var perX = e.pageX * 100/wWdt; 
    var perY = e.pageY * 100/wHgt; 

    // Div content which should be visible 
    var pageX = perX * pageWidth/100; 
    var pageY = perY * pageHeight/100; 

    // Calculate scaled divs new X, Y offset 
    var shiftX = (originX - pageX) + (e.pageX/scale); 
    var shiftY = (originY - pageY) + (e.pageY/scale); 

    $('#pageContainerInner').css({'left': shiftX+'px', 'top': shiftY+'px'}); 
}); 

</script> 

</body> 
</html>

希望這能幫助別人。

來源

2013-01-14 Sudesh

我已經發布了一個可能的解決方案http://jsfiddle.net/PYP8c/。

下面是您的頁面修改後的樣式。

BODY { 
     margin: 0px; 
     padding: 0px; 
    } 

#mainContainer { 
     width: 100%; 
     overflow: hidden; 
    position: relative; 
     margin: 10px auto; 
     -webkit-transform-origin:50% 20%; 
     -webkit-transform:scale(1.37); 
     width: 1218px; 
     height: 774px; 
     border: 1px solid #000000; 
    } 
    #pageContainer { 
     position:absolute; 
    top:0px; 
    }

這是相同的javascript代碼。

$(document).ready(function() { 
    //setHeight(); 

    //$(window).resize(setHeight); 
}); 


function setHeight() 
{ 
    $('#mainContainer').css({'height': $(window).height()}); 
} 

$('#mainContainer').mousemove(function (e) { 
    var contentHeight = $("#pageContainer").height(); 
    var minTop = 774 - contentHeight; 
    if(minTop>0) 
     minTop = 0; 
    var currTop = ((e.pageY-10)/774.0)*(minTop); 
    document.getElementById("pageContainer").style.top = currTop+'px'; 
});

它只是你如何能得到的文本演示來移動基於鼠標座標。

您可以進行很多更改，例如添加一個淡入淡出的滾動條，這會向用戶提供關於在兩個垂直方向上仍有多少內容的反饋。

此外，我已經使用了硬編碼的高度值，但在最終版本中，我會建議您動態獲取mainContainer分區的高度。

來源

2013-01-14 10:06:31

我已經更新了你，以顯示一個工作示例，它在閃存中。但t會幫助可視化 – Sudesh

你的例子幫助我做到了，非常感謝。但目前的例子是相當完美的像素，併爲邊界地區如何padd說所有四個邊界說10px的問題。 – Sudesh

而不是使用邊框，使用填充。結果看起來是一樣的，因爲填充是內容本身的一部分，您只需將填充頂部和填充底部添加到內容高度（本例中爲774）即可。這應該工作。 –

使用javascript移動css縮放的div

回答

相關問題