Question

我是一个jQuery新手，我正在寻找创建一个交互式翻转：翻转一个小图像，并用鼠标光标分别移动一个HTML窗口。

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

通过在小图像上找出基于百分比的光标位置并将其转换为html的div（隐藏溢出）的混乱的想法BOGGLES MY MIND !!!

我渴望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

jQuery插件或技术建议？

1 个答案: