0

这里有点长镜头，但希望有人能够帮助我解决这个问题。

我正在寻找将图像缩放到浏览器大小（移动设备），我可以实现这一点，但我想知道如果你向下滚动是否有可能，它会将你拉到下一个图像，如果有意义的话，它也会被缩放以适应浏览器的大小？（道歉）。

我目前使用 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，然后它也将缩放到浏览器大小。
有点远射，但我完全不知道如何实现这一点，任何建议将不胜感激！

4

1 回答 1

0

这可能是一种方式，一定有很多

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

但是您将图像设置为显示：无

然后制作一个插件

  • 显示一张图片/隐藏另一张图片
  • 将窗口滚动到该图像 ($(window).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
       }

 });
于 2013-01-22T21:52:29.253 回答