图片库/幻灯片缩放

Question

我想做一些类似的事情。

在这种情况下，当用户点击图像时，该图像以100%的浏览器高度显示，用户可以转到下一张/上一张图像。当用户再次点击时，图像将以更大的尺寸显示(可能是实际尺寸)，用户可以在图像中上下移动，但不需要滚动，只需移动鼠标。

我想做的是当用户第一次点击图片的时候直接跳转到最后一步:最大的图片与鼠标的上下移动同步，并且有可能跳转到下一个图片。换句话说，混合了原案例的第一步和第二步的特征。

在哪里我可以看到一个教程，或演示??或者我怎么能做到这一点??

谢谢

Answer 1

基本上，你想要做的有三个部分。

1. 点击图像将显示图像相对于浏览器高度
2. 在此模式下可以跳转到下一张图片
3. 再次点击该图像将进入超大尺寸模式，鼠标位置决定了您正在查看图像的哪一部分

我不打算写一整篇来演示这个，因为这是一个相当大的工作量，但我可以告诉你基本的思想。

#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);
});

就是这样。当然，我省略了一些细节，但这是总体思路。希望这能让你开始学习。好运。