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スクロール バーを表示したくないため、css3 を使用して#pageContainerdivを 1.37 にスケーリングしています。(inner div)#pageContainer'soverflow hidden

誰かが#mainContainerマウスの X 座標と Y 座標の位置に基づいてカーソルを に移動した場合に#pageContainer、 の同様の位置#pageContainerが見えるように移動したい (明確であることを願っています)。

を使用していて、 のマウス座標を基準に-webkit-transform-origin移動する方法がわかりません 。#pageContainer#mainContainer

アップデート：

電子ブックを開いてブラウザのサイズよりも大きくズームすると、issuu.com Web サイトで何が起こるかのようなものを探しています (より明確にする必要があります)。

私はそれを達成する方法（計算方法）のアルゴまたはポインターを探していますが、必ずしも実際のスクリプトではありません。

どうすればこれを達成できますか。

以下は動作中の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 に答える