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（拖动而不是鼠标移动）？为此目的，所有缩放插件（如 Cloud Zoom）都在顶部，并且大多数不支持在 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 回答