创建放大的'；摄影师Loop'；拖动任何内容时jquery ui的样式化效果

这是一个棘手的问题

比如说，你可以用jQueryUI的拖拽功能来拖拽一些东西

当你拖动它的时候，我想要一个循环弹出一个放大版本的被拖动的东西，这样就可以准确地看到正在发生的事情，只是放大了。因此，用户可以准确地看到发生了什么

有点像它在手机键盘上的功能，下面是一些示例

不太确定如何实现，可能会在页面上附加一个放大当前页面的iframe

你可以试试这个。我使用css来放大内容

Javascript

$("div.timepass").draggable({
    cursor: "move",
    cursorAt: {
        top: 0,
        left: 0
    },
    start: function (e) {
        $(e.target).addClass("zoom-class");
    },
    stop: function (e) {
        $(e.target).removeClass("zoom-class");
    }
});

CSS

.timepass {
    background-color: #f3d3a3;
    width: 24px;
}

.zoom-class {
    -moz-transform: scale(3.0);
    -webkit-transform: scale(3.0);
}

HTML

<div class="timepass"><p>Lol</p></div>

Lol

这是一个可能的副本，基于

谷歌的WorldFair doodle

。阿努拉格解释说：

基本上有两个图像-整个场景的大图像和小图像。较大的图像在文档中重复三次。查看下面带注释的图像，更好地了解缩放的工作原理

放大圈内的部分分为三个分区-顶部、中部和底部。应隐藏每个div的溢出。每个div相对定位在缩放圆内。移动鼠标时，将缩放圆的绝对位置更改为鼠标坐标。他们的示例还使用CSS3进行缩放并添加一些动画延迟

这里有一点小问题

另一个不隐藏div溢出以显示 整个东西就像一个正方形

---

Codepen的作者雨果·达比·布朗（Hugo Darby Brown）是另一个令人惊奇的荣誉。

检查以下免费且易于使用的

jQuery

插件，以达到预期效果

：用于启用放大镜效果的

Javascript

库

：用于缩放效果的jQuery插件，它使用Html5画布和CSS创建放大镜

---

：jQuery插件简化了放大镜效果的创建。

不，我希望在上面的观察镜中放大页面的副本，而不仅仅是放大的项目。这真的很容易做到。