我已經發布我的問題在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>
希望這能幫助別人。
我已經更新了你,以顯示一個工作示例,它在閃存中。但t會幫助可視化 – Sudesh
你的例子幫助我做到了,非常感謝。但目前的例子是相當完美的像素,併爲邊界地區如何padd說所有四個邊界說10px的問題。 – Sudesh
而不是使用邊框,使用填充。結果看起來是一樣的,因爲填充是內容本身的一部分,您只需將填充頂部和填充底部添加到內容高度(本例中爲774)即可。這應該工作。 –