Javascript jQuery插件，用于处理鼠标移动/拖动，并在隐藏的div上放松（有点“内部缩放”；

实际上，我正在寻找一个jQuery插件，它可以处理以下问题：

• 有一个隐藏溢出的容器
• 这里面还有一个更大的
• 当我移动到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);

});

this.zoom.mousemove（函数（事件）{
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=相对性/that.pageHeight；
如果（1<百分之x）{
百分比x=1；
}
如果（1<百分比）{
百分比=1；
}
左侧变量=百分比x*差异x；
var top=百分比*差异；
css（'left'，-left.）.css（'top'，-top）；
});

但是，当你从容器的另一个点进入时，这不是很平滑，也有点跳跃。因此，在重新发明轮子之前：有没有一个插件，它可以做到这一点，并且支持iOS（拖动而不是鼠标移动）？所有的缩放插件（如Cloud zoom）都是出于这个目的在顶部，大多数插件都不支持在iOS上拖动

如果没有这样的事情，我如何才能让它变得更流畅、更酷。任何方法都会有帮助。：）

---

非常感谢。

所以，这是我的解决方案-它工作得很好，很容易实现。可以做一些改进，但为了得到这个想法，我还是不做了。：）

JSFIDLE上有一个演示：

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>

div.zoom_包装器{
位置：相对位置；
溢出：隐藏；
宽度：500px；
高度：500px；
边框：1px实心#ccc；
光标：十字线；
}
div.zoom_包装器>*{
位置：绝对位置；
}

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>

var zoom=null；
//即使内容已更改，此功能也将工作
函数move（）{
//获取当前位置
var currentPosition=zoom.position（）；
var currentX=currentPosition.left；
var currentY=currentPosition.top；
//获取容器大小
var tempWidth=zoom.parent（）.width（）；
var tempHeight=zoom.parent（）.height（）；
//溢出
var differenceX=zoom.width（）-tempWidth；
var differenceY=zoom.height（）-tempHeight；
//将百分比乘以用作“平滑度因子”的百分比（此处为1/4）的差值（像素）
var tempX=zoom.data（'x'）/tempWidth*differenceX/4；
var tempY=zoom.data（'y'）/tempHeight*differenceY/4；
//获取要移动到的实际顶部和左侧值，最后一个因子会使其变慢并提供平滑度（它与之前的计算相对应）
左var=（tempX-currentX）/1.25；
var top=（临时-当前）/1.25；
//最后应用新值
css（'left'，-left.）.css（'top'，-top）；
}
$（文档）.ready（函数（）{
zoom=$（'缩放'）；
//处理mousemove以缩放图层-如果它不位于页面的左上角，也可以这样做
mousemove（函数（事件）{
var parentOffset=$（this.parent（）.offset（）；
zoom.data（'x'，event.pageX-parentOffset.left）；
zoom.data（'y'，event.pageY-parentOffset.top）；
});
//仅当用户位于容器上方时才启动操作
缩放。悬停(
函数（）{
data（'running'，setInterval（function（）{move（）；}，30））；
},
函数（）{
clearInterval（zoom.data（'running'））；
}
);
});

注:

---

当然，这一款不支持触摸设备。但是我（再次）使用了/我可以推荐好的旧iScroll…：）

因此，这里是我的解决方案-它工作得很好，很容易实现。可以做一些改进，但为了得到这个想法，我还是不做了。：）

JSFIDLE上有一个演示：

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>

div.zoom_包装器{
位置：相对位置；
溢出：隐藏；
宽度：500px；
高度：500px；
边框：1px实心#ccc；
光标：十字线；
}
div.zoom_包装器>*{
位置：绝对位置；
}

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>

var zoom=null；
//即使内容已更改，此功能也将工作
函数move（）{
//获取当前位置
var currentPosition=zoom.position（）；
var currentX=currentPosition.left；
var currentY=currentPosition.top；
//获取容器大小
var tempWidth=zoom.parent（）.width（）；
var tempHeight=zoom.parent（）.height（）；
//溢出
var differenceX=zoom.width（）-tempWidth；
var differenceY=zoom.height（）-tempHeight；
//将百分比乘以用作“平滑度因子”的百分比（此处为1/4）的差值（像素）
var tempX=zoom.data（'x'）/tempWidth*differenceX/4；
var tempY=zoom.data（'y'）/tempHeight*differenceY/4；
//获取要移动到的实际顶部和左侧值，最后一个因子会使其变慢并提供平滑度（它与之前的计算相对应）
var left=（温度x-电流x