Javascript jQuery：具有缩放功能的弹性标题/图像？

我相信你们都在一些应用程序的标题图像上看到过这种iOS风格，在这些应用程序中，你可以拖动缩放，就像一幅弹性图像

我正试图在

jquery

中实现这一点，也许只需要一些CSS的帮助

这是使用

angularjs

完成的，但是我不熟悉angularjs，所以我想知道是否有人已经或者知道一个简单的jquery示例

这是angularjs示例：

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

我还发现其他项目使用了

cordova和gulp

，但我也不完全确定gulp是什么，所以我甚至不能使用它

---

任何指针都将不胜感激。

首先，我不认为这里有任何人会如此疯狂地为您编写如此完整的代码

然而，正如你提到的，为你指明正确的方向会很有帮助

我曾经建造过与你想建造的完全相同的建筑。我用的是：

我认为这个github项目已经非常接近了

---

它的功能与iOS浏览器完全相同。您只需对其进行微调，以满足您的要求。

我为您准备了这个。看看这把小提琴：

或者这个片段（当然在小提琴上效果更好）：

var拖动=false；
var maxDrag=170；
变量时间=-1；
var-prevScrollTop=-1；
var-originalTime=-1；
var originalTop=-1；
原始var=-1；
$（“正文”）。在（“鼠标向下触摸启动”上，（e）=>{
拖动=真；
原始=e.pageY；
如果（！原始）{
originalY=e.originalEvent.touchs[0].pageY；
}
originalTime=prevScrollTime=Date.now（）；
originalTop=prevScrollTop=document.body.scrollTop；
});
$（“正文”）。在（“鼠标触摸端”（e）=>{
拖动=假；
$（“.img容器”）.animate({
高度：“75vw”，
宽度：“100vw”，
左：0
}，300，“地役权立方”）；
如果（！e.pageY）e.pageY=e.originalEvent.touch[0].pageY；
如果（Date.now（）-prevScrollTime>=60）返回；
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）{
$（“身体”）。设置动画({
滚动顶部：0
}, {
持续时间：（document.body.scrollTop+targetTop）/（document.body.scrollTop-targetTop）*400，
放松：“线性”，
队列：false，
完成：（）=>{
拖动（-targetTop/8400，（）=>{
$（“.img容器”）.animate({
高度：“75vw”，
宽度：“100vw”，
左：0
}，300，“地役权立方”）；
});
}
});
}else if（targetTop>pageEnd）{
$（“身体”）。设置动画({
滚动顶端：targetTop
}，（targetTop-pageEnd）/targetTop*400，“easeOutCubic”）；
$（“.parent”）.animate({
高度：$（“.parent”）.height（）+（targetTop-pageEnd）/64
}, {
队列：false，
持续时间：（targetTop-pageEnd）/targetTop*400，
完成：（）=>{
$（“.parent”）.animate({
高度：$（“.parent”）.height（）-（targetTop-pageEnd）/64
}，300，“地役权立方”）；
}
});
}否则{
$（“身体”）。设置动画({
滚动顶端：targetTop
}，600，“easeOutCubic”）；
}
});
$（“body”）。在（“mousemove touchmove”上，（e）=>{
如果（拖动）{
如果（！e.pageY）{
e、 pageY=e.originalEvent.touchs[0]。pageY；
}
if（document.body.scrollTop==0&&e.pageY>originalY）{
拖动（例如，pageY-原始，1）；
}否则{
document.body.scrollTop=prevScrollTop-e.pageY+原始；
prevScrollTop=document.body.scrollTop；
prevScrollTime=Date.now（）；
}
}
});
函数拖动（x、y、回调）{
//使用常量可以实现不同的缓和效果
var incValue=maxrag*2/3-Math.pow（maxrag*2/3，-（x-maxrag*4）/maxrag/4）
//原始图像为16:12，更改代码以匹配目标纵横比
$（“.img容器”）.animate({
宽度：$（“正文”）.width（）+incValue，
高度：$（“主体”）.width（）*0.75+incValue*0.75，
左：-incValue/2
}, {
持续时间：y，
放松：“放松”，
队列：false，
完成：回调
});
}
$（窗口）。滚动（（）=>{
var scrollTop=document.body.scrollTop；
如果（scrollTop<0）scrollTop=0；
如果（scrollTop>=0&&scrollTop<$（“.img容器”）.height（）{
$（“.img容器”）.css（“顶部”，滚动顶部/2）；
}
});
正文{
宽度：100vw；
高度：100vh；
背景色：#000；
颜色：#fff；
溢出x：隐藏；
用户选择：无；
游标：默认值；
}
.家长{
位置：绝对位置；
左：0px；
顶部：0px；
右：0px；
}
.img集装箱{
位置：相对位置；
顶部：0px；
左：0px；
宽度：100vw；
高度：75vw；
}
img{
宽度：100%；
身高：100%；
}
#信息{
位置：相对位置；
宽度：100vw；
边际：0px；
字体重量：较轻；
字体大小：20px；
框大小：边框框；
填充：30px；
字体系列：-苹果系统，“Helvetica”，“Arial”，衬线；
背景色：#000；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃格斯塔斯康瓦利葡萄园（Curabitur egestas convallis enim quis pharetra）。这是一种生活方式，但不一定是一种生活方式。门前的交通工具。这是一种斜方肌。土耳其人
nunc molestie，sed hendrerit metus varius。前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔，前庭三叉舌苔。在hac habitasse Plateum，一句名言。埃蒂亚姆·塞德·帕特拉。Donec mauris libero，posuere ut metus id，molestie varius arcu。梅塞纳斯
塞德·内克·奥古斯。前庭时间记录。多洛乌尔特里斯调味品中的大黄鱼。苏黎世威尼斯人。整粒aliquam mattis tellus，以蒲公英舌苔ac。



Morbi elementum nec lorem nec blandit。Donec varius nulla eu nibh aliquet，一种欧洲的叶舌