javascript - jQuery 插件，用于在隐藏的 div 上缓动鼠标移动/拖动(类似于 "inner zoom"

Question

实际上我正在寻找可以处理此问题的 jQuery 插件:

• 有一个 overflow hidden 的容器
• 里面还有一个，更大一些
• 当我移动到 div 上时，我看到的部分取决于我当前的位置
  • 当我在左上角时，我看到内部容器的左上角
  • 当我在中间时，我看到容器的中间......

我写了一些 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 上拖动。

如果没有这样的东西。我怎样才能使它更顺畅和更酷。任何方法都会有所帮助。 :)

非常感谢。

Answer 1

所以，这是我的解决方案 - 它工作得很好并且很容易实现。可以做一些改进，但为了得到这个想法，我会那样做。 :)

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 ...... :)