javascript - jQuery:具有缩放功能的 flex 标题/图像？

Question

我相信你们都在某些应用程序的标题图像上看到过这种 iOS 风格，您可以在其中拉动缩放，它就像一个 flex 图像。

我正试图在 jquery 中实现这一点，也许只需要一些 CSS 的帮助。

这是使用 angularjs 完成的，但我不熟悉 angularjs，所以我想知道是否有人拥有或知道一个简单的 jquery 示例？

这是 angularjs 的例子:

https://codepen.io/olach/pen/NqrYQL

如果你拉取镜像然后释放它，你会看到效果。

我还发现了其他使用 cordova 和 gulp 的元素，但还是不完全确定 gulp 是什么，所以我什至不能使用它。

任何指针将不胜感激。

Answer 1

我已经为你整理好了。检查这个 fiddle :

https://jsfiddle.net/RCD_Y/sj9xuk1p/16/

或者这个片段(当然在 fiddle 上效果更好):

var dragging = false;
var maxDrag = 170;

var prevScrollTime = -1;
var prevScrollTop = -1;
var originalTime = -1;
var originalTop = -1;
var originalY = -1;

$("body").on("mousedown touchstart", (e) => {
  dragging = true;
  originalY = e.pageY;
  if (!originalY) {
    originalY = e.originalEvent.touches[0].pageY;
  }
  originalTime = prevScrollTime = Date.now();
  originalTop = prevScrollTop = document.body.scrollTop;
});

$("body").on("mouseup touchend", (e) => {
  dragging = false;
  $(".img-container").animate({
    height: "75vw",
    width: "100vw",
    left: 0
  }, 300, "easeOutCubic");
  if (!e.pageY) e.pageY = e.originalEvent.touches[0].pageY;
  if (Date.now() - prevScrollTime >= 60) return;
  var veloc = (document.body.scrollTop - originalTop) / (Date.now() - originalTime);
  var targetTop = document.body.scrollTop + $("body").height() * veloc * Math.abs(veloc);
  var pageEnd = $(".parent").height() - $("body").height();
  if (targetTop < 0) {
    $("body").animate({
      scrollTop: 0
    }, {
      duration: (document.body.scrollTop + targetTop) / (document.body.scrollTop - targetTop) * 400,
      easing: "linear",
      queue: false,
      complete: () => {
        drag(-targetTop / 8, 400, () => {
          $(".img-container").animate({
            height: "75vw",
            width: "100vw",
            left: 0
          }, 300, "easeOutCubic");
        });
      }
    });
  } else if (targetTop > pageEnd) {
    $("body").animate({
      scrollTop: targetTop
    }, (targetTop - pageEnd) / targetTop * 400, "easeOutCubic");
    $(".parent").animate({
      height: $(".parent").height() + (targetTop - pageEnd) / 64
    }, {
      queue: false,
      duration: (targetTop - pageEnd) / targetTop * 400,
      complete: () => {
        $(".parent").animate({
          height: $(".parent").height() - (targetTop - pageEnd) / 64
        }, 300, "easeOutCubic");
      }
    });
  } else {
    $("body").animate({
      scrollTop: targetTop
    }, 600, "easeOutCubic");
  }
});

$("body").on("mousemove touchmove", (e) => {
  if (dragging) {
    if (!e.pageY) {
      e.pageY = e.originalEvent.touches[0].pageY;
    }
    if (document.body.scrollTop == 0 && e.pageY > originalY) {
      drag(e.pageY - originalY, 1);
    } else {
      document.body.scrollTop = prevScrollTop - e.pageY + originalY;
      prevScrollTop = document.body.scrollTop;
      prevScrollTime = Date.now();
    }
  }
});

function drag(x, y, callback) {
  //Play with the constants to achieve different easing effects
  var incValue = maxDrag * 2 / 3 - Math.pow(maxDrag * 2 / 3, -(x - maxDrag * 4) / maxDrag / 4)
    //The original image is 16:12, change code to match target aspect ratio
  $(".img-container").animate({
    width: $("body").width() + incValue,
    height: $("body").width() * 0.75 + incValue * 0.75,
    left: -incValue / 2
  }, {
    duration: y,
    easing: "easeOutCubic",
    queue: false,
    complete: callback
  });
}

$(window).scroll(() => {
  var scrollTop = document.body.scrollTop;
  if (scrollTop < 0) scrollTop = 0;
  if (scrollTop >= 0 && scrollTop < $(".img-container").height()) {
    $(".img-container").css("top", scrollTop / 2);
  }
});

body {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
  user-select: none;
  cursor: default;
}

.parent {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
}

.img-container {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 75vw;
}

img {
  width: 100%;
  height: 100%;
}

#info {
  position: relative;
  width: 100vw;
  margin: 0px;
  font-weight: lighter;
  font-size: 20px;
  box-sizing: border-box;
  padding: 30px;
  font-family: -apple-system, "Helvetica", "Arial", serif;
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<div class="parent">
  <div class="img-container">
    <img src="https://az616578.vo.msecnd.net/files/responsive/cover/main/desktop/2016/11/03/636137866789556986-167666954_city-skyline-drawing-wallpaper-2.jpg" draggable="false" />
  </div>
  <div id="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas convallis enim quis pharetra. Etiam interdum viverra ligula, ut aliquam sem cursus eu. Etiam vehicula consequat porta. Sed iaculis eget nisl id rhoncus. Quisque cursus turpis vel
    nunc molestie, sed hendrerit metus varius. Suspendisse hendrerit dapibus purus, vestibulum iaculis ligula tristique non. In hac habitasse platea dictumst. Etiam sed volutpat erat. Donec mauris libero, posuere ut metus id, molestie varius arcu. Maecenas
    sed neque augue. Vestibulum tempus dictum semper. Phasellus maximus nisi in dolor ultrices condimentum. Sed venenatis sollicitudin suscipit. Integer aliquam mattis tellus, in pulvinar ligula rutrum ac.
    <br />
    <br /> Morbi elementum nec lorem nec blandit. Donec varius nulla eu nibh aliquet, a euismod ligula interdum. Morbi finibus erat leo, congue tempor nibh lobortis ac. Duis tempor ante vitae eros molestie scelerisque at non ex. Integer auctor a odio dapibus
    dapibus. Vivamus eget hendrerit magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus cursus bibendum egestas. Nullam vel nulla quis lorem dapibus sagittis. Suspendisse lacinia ligula sem, sed
    ullamcorper mauris euismod a.
  </div>
</div>

使用光标或手指四处导航。