javascript - 图片库/带缩放的幻灯片

I wanted to do something similar to this.

在这种情况下，当用户单击图像时，该图像将显示为浏览器高度的100％，并且用户可以转到下一个/上一个图像。当用户再次单击时，将以更大的尺寸（可能是真实尺寸）显示图像，并且用户可以在图像中上下移动，但无需滚动即可移动鼠标。

我想做的是，当用户第一次单击图像时，转到最后一步：上下移动最大的图像与鼠标移动同步，并且可以转到下一张图像。换句话说，它与原始案例的第一步和第二步的特征混合在一起。

在哪里可以看到教程或演示？或我该怎么做？

谢谢

最佳答案

基本上，您要做的事情分为三个部分。


单击图像将显示与浏览器高度有关的图像
在此模式下，您可以转到下一张图像
再次单击该图像将进入超大模式，在该模式下，鼠标的位置决定了您正在查看图像的哪一部分


我不会写整条小提琴来演示这一点，因为这是一项相当大的工作，但是我可以告诉您基本的想法。

使用＃1，单击图像时，您将创建一个新的div，其z-index的数字较大（例如9999）。该位置为fixed，您将创建

$(window).resize(function() {

    var windowheight = $(window).height();
    $("#imgdiv").css("height", windowheight);
});

如果用户决定调整窗口大小，它将调整图像大小，因此，它始终占据浏览器的全部高度。

对于＃2，箭头仅创建一个新的img标记。这个想法就像

function loadnew() {

    // create the new image
    var newimg = "<img id='newimg'></img>"
    $("#imgcontainer").append(newimg);

    // make sure it has the same classes as the current img
    // so that it's in the same position with an higher z-index
    // then load the image
    $("#newimg").addClass( "class1 class2" );
    $("#newimg").css( "z-index", "+=1" );
    $("#newimg").css( "opacity", 0 );

    $("#newimg").attr("src", "url/to/img");

    // animate the thing and then replace the src of the old one with this new one
    $("#newimg").animate( {
        opacity: 1;
    }, 1000, function() {
        $(oldimg).attr("src", $("#newimg").attr("src"));
    });
}

现在使用＃3，您将根据宽度调整图像大小。 div fixed位置。再一次，你需要一个

$(window).resize(function() {

    var windowwidth= $(window).width();
    $("#imgdiv").css("width", windowwidth);
});

以确保它始终占据整个屏幕。对于鼠标移动，您需要一个mousemove事件处理程序

$("#superimgdiv").mousemove( function(e) {

    // need to tell where the mouse is with respect to the window
    var height = $(window).height();
    var mouseY = e.pageY;
    var relativepct = mouseY/height;

    // change the position relative to the mouse and the full image height
    var imgheight = $("superimg").height();
    $("superimgdiv").css("top", -1*relativepct*imgheight);
});

就是这样。当然，我省略了很多细节，但这是总的想法。希望这可以帮助您入门。祝好运。

关于javascript - 图片库/带缩放的幻灯片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6697177/