Question

我确定你们在一些应用程序中的标题图像上看到了这种iOS风格，你可以在其中进行缩放，就像弹性图像一样。

我试图在jquery中尝试实现此功能，并且可能只在某些CSS的帮助下实现。

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

这是angularjs的例子：

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

如果您拉动图像然后将其释放，您将看到效果。

我还发现其他使用cordova and gulp的项目，但又不完全确定是什么意思，所以我甚至无法使用它。

任何指针都会受到赞赏。

Answer 1

我已经为你整理了这个。检查这个小提琴：

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

或者这个片段（肯定会在小提琴上效果更好）：

base

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

用光标或手指四处导航。

Answer 2

首先，我不认为这里的任何人都疯狂到足以为你编写这样的代码。

然而，就像你提到的那样，指向正确的方向会有所帮助。

我曾经像你想要的那样建造得非常出色。我使用的是： https://github.com/peachananr/fancy-scroll

我认为这个github项目尽可能接近。

它与iOS浏览器的功能非常相似。您只需对其进行微调即可满足您的要求。

jQuery：带缩放的弹性标题/图像？

2 个答案: