jQuery插件或技术建议？

Question

我是一个jQuery新手，我希望创建一个交互式翻转:翻转一个小图像和让一个HTML窗口分别随着鼠标光标移动。

我喜欢JQZoom的外观和感觉-但当滚动小图像时，我希望缩放区域是实际的HTML (图像和实时类型)，而不是静态图像。

一想到在小图片上弄出基于百分比的光标位置，然后把它转换成html的div (带有隐藏的溢出)，这真是让我难以置信！

我渴望得到jQuery忍者的建议！

Answer 1

转置鼠标位置正是您想要的，而且非常简单。请注意：

HTML：

<body>
  <div id="driver" />
  <div id="viewport">
    <div id="tile" />
  </div>
</body>

CSS：

#driver { width:100px; height:100px; }
#viewport { width:100px; height:100px; overflow:hidden; }
#tile { width:800px; height:333px; position:relative; }

JS (带jQuery)：

$(function() {
    var tileSize = {
        width: $('#tile').innerWidth(),
        height: $('#tile').innerHeight()
    };
    var driverSize = {
        width: $('#driver').innerWidth(),
        height: $('#driver').innerHeight()
    };
    var viewportSize = {
        width: $('#viewport').innerWidth(),
        height: $('#viewport').innerHeight()
    };
    $('#driver').mousemove(function(e) {
        var mousePos = {
            left: e.pageX - $(this).offset().left,
            top: e.pageY - $(this).offset().top
        };
        var posRatio = {
            x: mousePos .left / driverSize.width,
            y: mousePos .top / driverSize.height
        };
        var tilePos = {
            left: viewportSize.width / 2 - tileSize.width * posRatio.x,
            top: viewportSize.height / 2 - tileSize.height * posRatio.y
        };
        $('#tile').css(tilePos);
    });
});

想想你的想法，UNBOGGLED。:D