2

実際、これを処理できる jQuery プラグインを探しています。

  • オーバーフローが隠されているコンテナがあります
  • この中に別のものがあり、それははるかに大きい
  • div に移動すると、表示される部分は現在の位置によって異なります
    • 左上隅にいるとき、内側のコンテナの左上隅が見えます
    • 真ん中にいると、コンテナの真ん中が見えます…</li>

私はそれを行う小さな JavaScript を書きました:

this.zoom.mousemove( function(event) {

    var parentOffset    = $(this).parent().offset(); 
    var relativeX       = event.pageX - parentOffset.left;
    var relativeY       = event.pageY - parentOffset.top;

    var differenceX     = that.zoom.width() - that.pageWidth;
    var differenceY     = that.zoom.height() - that.pageHeight;

    var percentX        = relativeX / that.pageWidth;
    var percentY        = relativeY / that.pageHeight;

    if (1 < percentX) {
        percentX        = 1;
    }
    if (1 < percentY) {
        percentY        = 1;
    }

    var left            = percentX * differenceX;
    var top             = percentY * differenceY;

    that.zoom.css('left', -left).css('top', -top);

});

しかし、コンテナの別のポイントから入ると、これはあまりスムーズではなく、ちょっとビクビクします。だから、車輪を再発明する前に: まさにそれを行い、iOS をサポートする (マウスの代わりにドラッグする) プラグインはありますか? すべてのズーム プラグイン (クラウド ズームなど) は、この目的のためには過剰であり、ほとんどの場合、iOS でのドラッグはサポートされていません。

そして、このようなものがなければ。これをよりスムーズでクールにするにはどうすればよいでしょうか。どんなアプローチも役に立ちます。:)

どうもありがとう。

4

1 に答える 1

0

だから、ここに私の解決策があります - これはかなりうまく機能し、簡単に達成できます。いくつかの改善が行われる可能性がありますが、アイデアを得るために、そのままにしておきます。:)

jsfiddle にデモがあります:

http://jsfiddle.net/insertusernamehere/78TJc/

CSS

<style>
    div.zoom_wrapper {
        position:   relative;
        overflow:   hidden;
        width:      500px;
        height:     500px;
        border:     1px solid #ccc;
        cursor:     crosshair;
    }
    div.zoom_wrapper > * {
        position:   absolute;
    }
</style>

HTML

<div class="zoom_wrapper">
    <img id="zoom" src="http://lorempixel.com/output/people-q-c-1020-797-9.jpg" alt="">
</div>

JAVASCRPT

<script>

    var zoom        = null;

    // this function will work even if the content has changed
    function move() {

    // get current position
    var currentPosition = zoom.position();
    var currentX        = currentPosition.left;
    var currentY        = currentPosition.top;

    // get container size
    var tempWidth       = zoom.parent().width();
    var tempHeight      = zoom.parent().height();

    // get overflow
    var differenceX     = zoom.width() - tempWidth;
    var differenceY     = zoom.height() - tempHeight;

    // get percentage multiplied by difference (in pixel) cut by percentage (here 1/4) that is used as "smoothness factor"
    var tempX           = zoom.data('x') / tempWidth * differenceX / 4;
    var tempY           = zoom.data('y') / tempHeight * differenceY / 4;

    // get real top and left values to move to and the last factor slows it down and gives the smoothness (and it's corresponding with the calculation before)
    var left            = (tempX - currentX) / 1.25;
    var top             = (tempY - currentY) / 1.25;

    // finally apply the new values
    zoom.css('left', -left).css('top', -top);   

}

$(document).ready(function () {

    zoom    = $('#zoom');

    //handle mousemove to zoom layer - this also works if it is not located at the top left of the page
    zoom.mousemove( function(event) {
        var parentOffset    = $(this).parent().offset(); 
        zoom.data('x', event.pageX - parentOffset.left);
        zoom.data('y', event.pageY - parentOffset.top);
    });

    // start the action only if user is over the container
    zoom.hover(
        function() {
            zoom.data('running', setInterval( function() { move(); }, 30) );
        },
        function() {
            clearInterval(zoom.data('running'));
        }
    );

});

</script>

注: もちろん、これはタッチ デバイスをサポートしていません。しかし、そのために私は（再び）使用しています/古き良きiScrollをお勧めします… :)

于 2012-06-23T14:02:28.417 に答える