Javascript 我想创建一个视差滚动网站的三张图片，但只有两个滚动工作

我正在尝试使用javascript和html/css创建parallex滚动效果。 滚动必须适用于三张图片，所以第一张和第二张图片平行滚动，但我不能让第二张和第三张图片做同样的事情 我是javascript的新手，在实践中学习

CSS

JS

HTML

---

下面是javascript/canvas中的三幅图像视差。你也许可以调整它以适应你的需要

var img1=document.getElementById'img1'； var img2=document.getElementById'img2'； var img3=document.getElementById'img3'； var can=document.getElementById'can'； var w=can.width=img1.width=img2.width=img3.width=200； var h=can.height=img1.height=img2.height=img3.height=100； 绘图图像； //速度 var s1=.05； var s2=0.25； var s3=2； //职位 var-x1=0； var x2=0； var x3=0； var ctx=can.getContext'2d'； 功能性肛门{ ctx.fillStyle=6699CC； ctx.fillRect0，0，w，h；//绘制天空 ctx.drawImageimg3，x1，0；//只显示一个月亮 //其他图像重复 ctx.drawImageimg1，-w+x2，0； ctx.drawImageimg1，x2，0； ctx.drawImageimg2，x3，0； ctx.drawImageimg2，-w+x3，0； x1+=s1； x2+=s2； x3+=s3； 如果x1>WX1=0-w；//只显示一个月亮 如果x2>wx2=0； 如果x3>wx3=0； 请求动画框架； } ani； 函数图像{ var ctx1=img1.getContext'2d'； ctx1.beginPath； ctx1.moveTo0，h； ctx1.lineTo20，20； ctx1.lineTo40，h-10； ctx1.lineTo80，10； ctx1.1至120，h； ctx1.1到160,30； ctx1.lineTo200，h； ctx1.fillStyle=996600； ctx1.fill； var ctx2=img2.getContext'2d'； ctx2.fillStyle=666666； ctx2.30，h； ctx2.lineTo30,0； ctx2.lineTo45,0； ctx2.45，h； ctx2.100,50,25,50； ctx2.rectw-20,0,20,h； ctx2.fill； var ctx3=img3.getContext'2d'； ctx3.moveTo50，50； ctx3.arc25,25,20,0,360*Math.PI/2； ctx3.fillStyle=FFFF00； ctx3.1填充； } 身体{ 背景色：ACE； }

---

您已经添加了jQuery标记，但没有使用jQuery。可以删除吗？我认为只有两个可以工作，因为您只为img1和img2设置事件。

#img1{
    width: 100%;
    height: 970px;
    position: relative;
    z-index: -1;
}
#img2{
    width: 100%;
    height: 970px;
    position: relative;
    z-index: 1;
}
#img3{
    width: 100%;
    height: 970px;
    position: relative;
    z-index: 1;
}

var ypos,image,image2;
function parallex() {
    ypos = pageYOffset;
    image = document.getElementById('img1');
    image.style.top= ypos* .8 +'px';
}
function parallex2() {
    ypos = pageYOffset;
    image = document.getElementById('img2');
    image.style.zIndex=-1;
    image.style.top= ypos* .8 +'px';
}

if(screenY<=970) window.addEventListener('scroll',parallex);
else window.addEventListener('scroll',parallex2);

<img src="ny.jpg" id="img1" >
<img src="5429c32b425f183f61bf7316_new-york-city-skyline.jpg" id="img2" >
<img src="9OEWK8nMTFmqQwAFpFyn7snIGP8.jpg" id="img3">