变焦图片库/slide

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

就是这样。当然，我忽略了一些细节，但这是总的想法。希望这能让你开始。祝好运。