0

我已经在http://jsfiddle.net/ugnf4/上发布了我的问题，因为这样会更容易。

下面是我的 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>

目前#mainContainerdiv 有overflow hidden因为我不想显示滚动条，并且#pageContainerdiv(inner div)使用 css3 缩放为 1.37，因为在某些情况下，基于屏幕/浏览器宽度的高度#pageContainer's内容会因为overflow hidden.

我想编写 javascript 代码，以便如果有人将光标#mainContainer移入 ，基于鼠标 X 和 Y 坐标的位置，我想移动#pageContainer以便类似的位置#pageContainer可见（我希望它很清楚）。

我在使用时遇到问题-webkit-transform-origin，无法理解如何 #pageContainer相对于#mainContainer.

更新：

当您打开电子书并将其缩放到超过浏览器大小时，我看起来就像 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>

希望这对其他人有帮助。

4

1 回答 1

1

我在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-14T10:06:31.417 回答