Question

我已将问题发布在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>

目前#mainContainer div有overflow hidden因为我不想显示滚动条而#pageContainer div (inner div)使用css3缩放为1.37，因为在某些情况下基于屏幕/浏览器宽度高度#pageContainer's内容因overflow hidden而被隐藏。

我想编写javascript代码，这样如果有人在#mainContainer移动光标，根据鼠标X和Y坐标的位置，我想移动#pageContainer以便{{1}的相似位置将是可见的（我希望很清楚）。

我使用#pageContainer时遇到问题，无法理解-webkit-transform-origin的鼠标坐标是如何移动#pageContainer的。

更新：

我看起来像在issuu.com网站上发生的事情，当你打开一个电子书并将其缩放到超过浏览器大小时（应该让它更清晰）

我正在寻找算法或指针如何实现它（如何计算它）不一定是工作脚本。

如何实现这一目标。

下面是工作html

#mainContainer

希望这会有所帮助。

Answer 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分区的高度。

使用javascript移动css缩放div

1 个答案: