Question

这里有点远，但希望有人能够帮助我解决这个问题我正在寻找将图像缩放到浏览器大小（也是移动设备），我可以实现这一点，但我想知道如果你向下滚动它是否一切都可能，它会把你拉下来下一个图像，如果有意义的话，也会根据浏览器大小进行缩放？（道歉）。

我目前使用backstretch插件实现缩放图像，如下所示：

$(document).ready(function(){
$("#test").backstretch("../images/background-v2.jpg");
});

将它们嵌入div中，因为我希望它们大约为浏览器大小的95％，以在图像周围留下白色边框。
但是，由于我打算将网站带入wordpress以制作内容可管理的网站，我不希望通过jQuery插入图像标签。

理想情况下是这样的：

<div id="project-images">
<img src="../images/image-01.jpg" width="" height="" />
<img src="../images/image-02.jpg" width="" height="" />
<img src="../images/image-03.jpg" width="" height="" />
<img src="../images/image-04.jpg" width="" height="" />
</div>

将image-01缩放以适合浏览器大小，然后滚动它会将你拉到image-02，然后缩放到浏览器大小。
有点远景，但我完全不知道如何实现这一点，任何建议都会非常感激！

Answer 1

可能是单向的，必须有很多

将窗口高度设置为所有图像的高度，

但您将图片设置为display：none

然后制作一个插件

显示一张图片/隐藏另一张图片
将窗口滚动到该图像（$（窗口）.scrollTop（...））
重新定位回到顶部：0所有图像

然后

使用插件显示第一张图片

然后

var lastScrollTop = 0;

//how much must the user scroll before next/prev image is shown :
var minscrolling = 50;

$(window).on({
       "scrollstart" : function(){
             lastScrollTop = $(this).scrollTop();

       },
       "scroll" : function (e) {
             var currentscrollpos= $(this).scrollTop();
             //reposition visible image so it seems it doesn't scroll
             // top : lastScrollTop -currentscrollpos
             // 
            if (lastScrollTop - currentscrollpos > minscrolling)  

                 // use  plugin to show next img
                 // set lastscrolltop to  currentscrollpos

            else if (lastScrollTop -  currentscrollpos < -minscrolling) 
                  //use plugin to show previous img
                   // set lastscrolltop to  currentscrollpos
       }

 });

将图像缩放到浏览器大小...然后滚动到下一个图像

1 个答案: