开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

视差js不工作…图像未显示

视差效果是一种网页设计技术，通过让不同层次的图像以不同的速度滚动，从而创造出一种立体的视觉效果。如果你遇到视差效果的JavaScript不工作，图像未显示的问题，可能是由于以下几个原因：

基础概念

视差效果通常是通过监听滚动事件，然后根据滚动的位置动态调整背景图像的位置来实现的。这通常涉及到CSS和JavaScript的结合使用。

可能的原因及解决方法

JavaScript代码错误：
- 检查你的JavaScript代码是否有语法错误或者逻辑错误。
- 确保所有的变量都已经正确定义，并且在使用前已经初始化。

CSS样式问题：
- 确保你的CSS样式正确设置了背景图像，并且没有其他样式覆盖了这些设置。
- 检查是否有z-index属性导致图像被其他元素遮挡。
滚动事件未正确绑定：
- 确保你已经正确绑定了滚动事件到窗口对象上。
- 如果你使用了某些库（如jQuery），确保库已经被正确引入。
图像路径问题：
- 确保图像文件的路径是正确的，并且图像文件可以被浏览器访问。
浏览器兼容性问题：
- 检查你的代码是否兼容当前使用的浏览器。
- 有时候，旧版本的浏览器可能不支持某些现代的JavaScript特性。

示例代码

以下是一个简单的视差效果实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax Effect</title>
    <style>
        body {
            margin: 0;
            height: 200vh; /* 确保页面有足够的滚动空间 */
        }
        .parallax {
            background-image: url('your-image.jpg');
            height: 100vh;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="parallax"></div>
    <script>
        window.addEventListener('scroll', function() {
            let scrollPosition = window.pageYOffset;
            let parallaxElements = document.querySelectorAll('.parallax');
            parallaxElements.forEach(function(el) {
                el.style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
            });
        });
    </script>
</body>
</html>

参考链接

应用场景

视差效果常用于网站的全屏背景、导航栏、页头等部分，以增强视觉冲击力和用户体验。

总结

如果你遇到视差效果的JavaScript不工作，首先检查代码是否有误，然后确认CSS样式和图像路径是否正确，最后确保滚动事件已经正确绑定。如果问题依旧存在，可能需要进一步调试或查看浏览器的控制台输出，以获取更多错误信息。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

论文简述 | 无需校正和不失真的实时变化的鱼眼双目

1 摘要广角摄像头拍摄的稠密3D地图有利于导航和自动驾驶等机器人应用.在这项工作中,我们提出了一种实时稠密三维鱼眼相机建图方法,无需显式校正和不失真.我们扩展了传统的变分立体方法,通过使用由摄像机运动引起的轨迹场来约束沿外极曲线的对应搜索....与传统的校正方法相比,我们还提出了一种在不增加处理时间的情况下生成轨迹场的快速方法.通过我们的实现,我们能够使用现代图形处理器实现实时处理.我们的结果显示了我们的非校正稠密建图方法相对于校正变分方法和非校正离散立体匹配方法的优势...与传统的校正方法相比,我们的结果显示了额外的精确测量,与未校正的离散方法相比,我们的结果显示了更精确和稠密的估计.最后，通过我们的实现，我们能够在鱼眼双目摄像机系统和现代图形处理器上实现实时处理. 3...图7:不同视场(和)的[2]与我们方法的比较.我们通过使用我们的方法比较视差误差以及准确度提高的百分比图八是真实和合成数据的样本结果和我们的方法与视差误差表一展示了校正、未校正和我们的方法的视差误差比较.... 4 结论在本文中,我们提出了一种处理鱼眼相机的warping技术,该技术适用于不需要显式图像校正的variational stereo估计方法.我们表明,与不增加处理时间的传统方法相比,我们的方法可以实现更高和更均匀的精度和更大的

9901 0

如何使用3D立体视觉检查焊接线？

图3给出了该问题的图示，其中视差图像显示了非水平线的有效视差值（均匀灰色），以及水平线的可能错误或不相关的值（不均匀的灰色和黑色区域）。 ?...平行垂直线的间距扫描场景中对象的高度范围通常确定用于3D计算工作所需要的平行垂直线的最小距离，该关系取决于基于相关的块匹配算法如何工作。例如，图4显示了一对立体图像的左右图像。...左侧相机图像中的红色标记区域显示给定窗口大小的参考块。块匹配算法在预定义的视差搜索范围内，搜索右侧相机图像中的对应块，并以黄色标识出来。...注意，中间图像中相当小的视差搜索范围仅包括一条线，即与参考块匹配的线。相反，右侧图像中显示了具有覆盖多条线的视差搜索范围的情况，其中块匹配可能由于模糊的对应而失败。 ?...图4：图中显示了一对立体图像的左右图像。左相机图像中的红色标记区域是给定窗口大小的参考块。中间图像显示较小的视差搜索范围。右图显示了覆盖多条线的视差搜索范围。

1.5K3 0

如何用OpenCV制作一个低成本的立体相机

那么，它是如何工作的？当屏幕只是平面时，我们如何体验3D效果？其实，这些是通过一个叫立体相机的玩意儿来捕获的。...左图是立体相机捕获到的左右图像；右图是用没有标定过的左右图像生成的视差图。我们观察到，使用未校准的立体相机生成的视差图非常嘈杂且不准确。为什么会这样？...下图显示了一对具有点对应关系的立体图像，以及使用这些图像生成的视差图。我们观察到，与前一张相比，现在的视差图噪声更低。在这种情况下，相应的关键点具有相等的Y坐标。仅当相机平行时才可能出现这种情况。...4.最后，使用initUndistortRectifyMap方法获得查找未失真和校正后的立体图像对所需的映射。 5.将此映射应用于原始图像以获得校正的未失真的立体图像对。...因此，我们计算的通过映射将立体图像对转换为未失真的校正的立体图像对，并将其保存以备将进一步使用。好了，这样我们就制作好了立体相机，下期再会~ 参考文献 [1] C. Loop and Z.

1.5K2 0

单目全向立体相机的标定（一种新的相机形式）

该方法采用参数化光学模型来模拟光学系统，如果模型足够精确，在充分再现畸变和未对准的情况下，也可以进行精确的圆柱形膨胀。...图4，从图2中显示的传感器图像计算图像。（中上部和中上部）使用我们的新光学模型以圆柱体投影的上视图和下视图图像。（中下部）根据上面两幅图像计算的视差图像。近和远的对象分别以红色和蓝色显示。...获得的视差图像和点云为了展示我们相机的精度和局限性，我们在图6和图7中显示了RGB图像、视差图像和点云。在图6中，显示了在内部拍摄的图像和点云。...，传感器区域显示为灰色矩形图6，RGB图像、视差图像和内部场景的点云，为清晰起见，我们仅显示视场的180度，A、 B、C和D显示了相应的对象，在对象C的四个表中，最近的和最远的分别位于距离摄像机4.5...标准偏差不超过4.9%。作为未来的工作，光学分辨率的提高可导致精度的进一步提高。我们已经证明，我们的摄像头能够定位14米范围内的物体，如行人、其他车辆和障碍物。

7161 0

CVPR 2018 | 中科大&微软提出立体神经风格迁移模型，可用于3D视频风格化

现在，随着头戴式 3D 显示器（例如 AR/VR 眼镜）和双镜头智能手机的发展，立体 3D 越来越受关注，并激发了许多有趣的研究工作，例如立体修复 [36,27]、视频稳定 [15]，以及全景 [39]...受卷积神经网络 ( CNN ) 能力的启发，Gatys 等人的开创性工作 [ 13 ] 提出了一种将指定作品的风格自动转换为任何图像的通用解决方案。...此外，还需要一个快速的解决方案，尤其是在实际的实时 3D 显示中（例如 AR/VR 眼镜）。最后但不是最不重要的一点，作为进一步扩展的立体视频中的风格转换应当同时满足时间的连贯性。...考虑到视差一致性和时间连贯性，本文通过集成一个附加的子网络把该方法扩展到了立体视频的风格转换上。本文的剩余部分将首先总结一些相关的工作。...前一种方法（没有结合一致性约束）往往会在遮挡掩码边界附近产生纹理不连续。最下行是右视图遮挡掩码和放大的风格化图片。 4. 立体风格转换网络本文提出了一个快速立体风格转换的前馈网络。

1.1K8 0

--0312视差效果--课堂笔记

视差（量），视差角度; 它是一种比较优雅酷炫的页面展示的方式，今天咱们研究下视差滚动的原理和实现方式。视差的原理，视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异。...//========== 简单的视差效果，一般可以用css来实现。 background-attachment属性，设置背景图像是否固定，或者随着页面的其余部分滚动。...背景图像会随着页面其余部分的滚动而移动。 fixed，当页面的其余部分滚动时，背景图像不会移动。...//============== js视差效果的插件接下来讲了下，我是如何阅读源码的 Parallax-Scrolling-master.js //代码量有限，很可能只是为了实现某个具体网站的代码，，...看源码，要根据一些“线索”，就是变量名，传入的参数，谁调用了它们 //============== stellar.js //，它也是类似的看法这三个jq插件的js文件都已经打开了，现在咱们来看看，

9496 0

30个你应该在2022年里使用的JavaScript 动画库

4、 Rellax.js 地址：https://github.com/dixonandmoe/rellax 一个光滑、超轻量级的 javascript 视差库。...6、wow.js 地址：https://wowjs.uk/ 滚动时显示动画。 7、Chocolat.js 地址：http://chocolat.insipi.de/ 免费灯箱插件。...8、Animate on Scroll 地址：https://michalsnik.github.io/aos/ 滚动库上的动画以在您滚动时显示动画。...9、Tilt.js 地址：http://gijsroge.github.io/tilt.js/ 一个微小的 requestAnimationFrame 为 jQuery 提供了 60+fps 的轻量级视差悬停倾斜效果...14、Lightbox2 地址：https://lokeshdhakar.com/projects/lightbox2/ 一个小型 JS 库，用于在当前页面顶部覆盖图像。

3.3K2 0

Mars说光场（2）— 光场与人眼立体成像机理

双目视差的感知必须依靠双目协同工作才能完成。 ? 图 2....首先、左右眼从显示屏接收到的图像完全一样，因此不能产生双目视差。其次、当人眼在屏幕前左右移动时，显示屏所呈现的内容会产生相同的位移，因此无法提供移动视差。...立体眼镜的工作原理又包括分光式、偏振式、快门式三种，这里不再展开讨论。然而，3D电影只提供了双目视差这一种生理视觉信息，并不能提供移动视差和聚焦模糊。...相比3D电影，虚拟现实头盔不仅能提供双目视差，还能提供移动视差，从而带来更丰富逼真的立体视觉体验。虚拟现实头盔主要利用准直放大透镜（Collimating Lens）将眼前的显示屏图像放大并拉远。...同样的两套准直放大光学显示系统分别为左右眼提供不同的图像。 ? 图 7. 虚拟现实头盔准直放大光路示意图相比于3D电影院，VR头盔最大的改进之处在于它能提供移动视差。

9741 0

据说以后在探头下面用帽子挡脸没用了：SymmNet遮挡物检测的对称卷积神经网络

当前最先进的处理立体图像和光流方法都是基于对遮挡物的检测：通过在视差和运动计算过程中排除遮挡物的像素，或通过修复这些被遮挡的区域。...然而，LRC 方法中未引入遮挡物的先验知识，这将无法精确地计算出视差结果，影响后续的检测结果。其他一些研究提出通过交替改进视差和运动准确性，来迭代地改善遮挡物的映射图。...本文的贡献主要包含以下三个方面：这项工作是第一个无需利用视差和运动估计的先验知识，而直接对遮挡物进行检测的研究提出了一个对称卷积神经网络结构 SymmNet，它能直接以图像对作为输入并进行协同工作...表2 定量估计结果所有的评估结果中，值越高表示模型性能越好，在这里我们用粗体来突出显示最佳的表现。...总结我们提出了一种名为 SymmNet 的 CNN 模型来检测立体图像或视频序列中的遮挡。与传统方法通过预先计算的视差或光流估计结果来推断被遮挡的像素不同，我们的模型能够直接从原始图像中进行学习。

6401 0

近期两篇双目图像超分辨算法论文解读｜AAAI2020 & SPL2020

本文将解读双目图像超分辨领域2020年的两个最新工作：一、Stereoscopic Image Super Resolution with Stereo Consistent Feature（AAAI2020...这两个算法虽然可以在一定程度上融合左右视图的信息，但是在超分辨过程中未考虑左右图的特征一致性——双目图像在未被遮挡的对应区域具有相同的纹理特征。...二、A Stereo Attention Module for Stereo Image Super-Resolution（SPL2020） Motivation：领域内现有的双目超分辨工作 StereoSR...双目图像超分辨需要有效地结合双目图像中的互补信息，而双目图像中的视差变化使得左右图互补信息难以被充分利用，遮挡问题造成的左右图信息不对称也给超分辨过程带来了挑战。 2....结语：以上两个工作均从“视差注意力机制”着手，对如何进一步提升双目图像超分辨的性能做出了启发性的探索：SPAMnet强调超分辨过程中双目图像特征的一致性，并通过设计stereo-consistency

2.1K1 0

基于双目视觉的树木高度测量方法研究

通常P2>P1，P1是为了适应倾斜或弯曲的表面，P2则是为了保留不连续性。...5)视差计算和视差后处理。进行后处理操作的目的是处理视差图在前面步骤中可能造成的视差误差、图像鲁棒性较差、图像不连贯等问题。...在同一时间内实现了二维和三维空间中树木信息的提取，在林业工程的实际工作中具有较好的价值与意义。...图10显示了云杉、杏树、榆树、樟子松经立体匹配后得到的深度图像：图10a、b、c的拍摄距离分别约为25，42和6m；图10d为多棵树木图像。...结果显示，在近距离及中距离拍摄时，SGBM算法得到的深度图像表面平滑，轮廓较分明，结果较好，而BM算法轮廓分明，但树的表面有部分失真。

1.6K3 0

DCF：立体视觉的视差计算系统

不过，以前的工作只提供了一些实现细节，处理步骤上不太好定义，并且很少讨论软件设计。与之相反，DCF是对立体视觉系统的主要组件进行标准化，并进行了集成，以促进视差图的构建。...有许多视差计算算法，特别是用于成本聚合（the cost aggregation）步骤的方法[14，15，16]。一些工作讨论了聚合窗口大小的不变方法，如积分图像[17]和框滤波[18，19]。...这项工作提出了视差计算框架（DCF），旨在实现不同视差计算方案的共存。DCF界定了立体视觉的范围，为按需处理不同的应用程序提供了坚实的基础，其软件设计允许附加新的立体视觉方法、算法和指标评估。...DCF调用是通过脚本进行的，在脚本中，从参数定义到函数调用，命令都是按顺序显示的。从这个意义上说，DCF中存在的所有功能都可以在多种配置中访问、参数化和执行。...02 影响概述已发表的与视差图构建相关的工作提供了很少的实现细节，没有提供源代码，提出的处理步骤也没有很好地定义，并且用于处理计算机视觉任务的软件设计很少被讨论或强调。

8062 0

DCF：立体视觉的视差计算系统

视差图是立体视觉系统的重要组成部分，因为它们会对两个或多个图像的位移进行编码。不过，以前的工作只提供了一些实现细节，处理步骤上不太好定义，并且很少讨论软件设计。...有许多视差计算算法，特别是用于成本聚合（the cost aggregation）步骤的方法[14，15，16]。一些工作讨论了聚合窗口大小的不变方法，如积分图像[17]和框滤波[18，19]。...这项工作提出了视差计算框架（DCF），旨在实现不同视差计算方案的共存。DCF界定了立体视觉的范围，为按需处理不同的应用程序提供了坚实的基础，其软件设计允许附加新的立体视觉方法、算法和指标评估。...DCF调用是通过脚本进行的，在脚本中，从参数定义到函数调用，命令都是按顺序显示的。从这个意义上说，DCF中存在的所有功能都可以在多种配置中访问、参数化和执行。...02 影响概述已发表的与视差图构建相关的工作提供了很少的实现细节，没有提供源代码，提出的处理步骤也没有很好地定义，并且用于处理计算机视觉任务的软件设计很少被讨论或强调。

2072 0

MDNet、SiamFC、ADNet、CFNet、LSTM（RNN）…你都掌握了吗？一文总结目标追踪必备经典模型（一）

图像是从视频的两帧中提取出来的，这两帧都包含目标，并且最多间隔T帧。在训练时忽略对象的类别。对每个图像内的对象比例进行归一化，而不破坏图像的宽高比。...第一列显示了目标的初始位置，第二和第三列显示了在每一帧中寻找目标边界框的迭代动作流程 ADNet完整的网络架构如下图：图4 网络结构。虚线表示状态转换。...监督学习框架不能学习未标记的帧的信息，但是，强化学习可以以半监督的方式利用未标记的帧。为了在RL中训练ADNet，应该确定追踪分数{z_t,l}，然而，在未标记的序列中的追踪分数不能立即确定。...很多工作都意识到多尺度代价体的重要性，但这些工作通常都认为低分辨率的代价体特征信息不足，无法生成准确的视差图，所以弃之不用。...有了初始化视差下一步就是构建高分辨率的cost volume，细化视差图。理想的视差概率分布应该是单峰的，即该位置属于某个视差的概率非常高、属于其它视差的概率非常低。

6632 0

90. 三维重建25-立体匹配21，训练端到端的立体匹配模型的不同监督强度

其中有监督学习使用带有3D真实视差的标注数据进行训练，自监督学习则不需要真实视差，而是使用辅助线索（例如图像重建误差）进行训练，弱监督学习介于两者之间，使用部分标注数据或较弱的监督信号进行训练。...其他方法，例如Yao等人的工作[6]，则将损失分为两个部分：一个针对初始视差，另一个针对精细视差，最终的总损失是两者的加权和，比如作者原文中写道：二....其原理是，如果估计的视差图尽可能接近真实值，那么参考图像与任何其他图像之间的差异（但使用估计的深度图未投影到参考图像上）也会被最小化。...自监督学习：不需要真实视差数据，而是利用图像本身生成的监督信号进行训练，通常通过图像重建误差来指导训练。这种方法减少了对标注数据的依赖，但在复杂场景中可能表现不佳。...弱监督学习：结合有监督和自监督的优点，通过利用少量的真实数据和大量的未标注数据进行训练，通常使用辅助信号来减少手动标注的需求。

1111 0

CVPR2020 | BidNet：在双目图像上完成去雾操作，不用视差估计

本文是收录于CVPR2020的工作，我是被双目图像去雾的题目所吸引的，其实整个工作的创新性不高，但是可以从中学到数据集的制作，图像去雾等基本知识。整体上，也可以看作视觉注意力机制的又一应用。...现有的双目图像去雾方法依赖于同时执行去雾和视差估计。然而，这种方法有三个缺点：（1）对于给定的微小视差误差，深度误差会随着视差的增加而增加。...主要贡献：（1）提出了一种新颖的双目图像去雾框架，称为BidNet，该框架能够利用左右图像之间的相关性对双目图像对进行除雾，而无需估计视差，它可以避免由不精确的视差估计引起的大误差。...除权重共享特征提取模块外，左分支和右分支中的其余权重不共享。⊕表示concatenation和一个3×3卷积层以减少通道。上采样表示双线性插值。输入图片首先通过预处理层以学习更好的输入特征。...上面的表1中显示了详细的结构，使用了三个平均池化层，内核大小分别为3、7和15，步长为1。池化层将初始估计的transmission maps转换为全局表示的增强集合。

1.8K1 0

立体视觉的物距测量

使用立体视觉，可以从不同相机视图中的图像得出某个点的世界位置。立体视觉双目立体视觉是机器视觉的重要形式。它基于视差原理，并使用成像设备从不同位置获取被测物体的两个图像。...结合两个位置获得的图像并观察它们之间的差异，以便获得清晰的深度感，建立特征之间的对应关系，并将同一空间中的相同物理点映射到不同图像中的图像点。这种差异称为视差图。...完成上述工作，求解了基本矩阵E之后，可以通过SVD分解获得以下方程式：其中U和V是正交矩阵，中间的X是奇异值矩阵。...其中：立体声矫正由于未对准和不同的特性，两个立体摄像机的图像都必须扭曲为极线对齐的新图像。这些新图像称为对证图像。整个过程称为“校正”，然后将图像平面扭曲到共面平行平面上。...可以认为一个功能定义了用于处理左右图像中匹配像素的方法，其中d = ul-ur是我们定义的最小视差范围：如果对每个像素都这样做，可以得到最终的视差图，但是最终的视差图的效果很差。

5733 0

这11个有趣的 CSS 和 JavaScript 库太实用了！

作为一名合格的前端开发人员，如果您想节省一些时间并提高工作效率，下面这些插件库你一定能用的上！ 1....BigPicture BigPicture 是一款轻量级且独立于框架的 JavaScript 图像/视频查看器插件。...可以使用标签以及背景图像,支持 Youtube、Vimeo、直接视频链接、任何 iframe以及音频文件。地址：https://henrygd.me/bigpicture/ 2....Baguette box BaguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件，支持滑动手势在移动设备上使用。...Rellax 视差风尚可能正在消失，但具有精心制作的视差的网站仍然给任何访问者留下深刻印象。rellax.js 是一款轻量级的不需要任何依赖的纯JavaScript滚动视觉差特效插件。

1.4K4 0

三维重建14-立体匹配10，经典视差优化算法Fast Bilateral-Space Stereo

，及错误像素占比在无纹理区域，有纹理区域，遮挡区域，非遮挡区域，深度不连续区域共5个区域计算和理想视差图之间的均方根误差，及错误像素占比在不同视角下进行反向变换，计算变换后的投影误差，即所谓预测误差...按照作者的说法，根据这种算法的原理你甚至无法生成不贴边的视差图！在正式介绍今天的算法之前，让我们先来看看效果。...这一项一般用于给出某些额外的约束条件，比如通常假设整个图像的视差是平滑变化的。这样视差的大变化只会在场景内视差边缘处产生，一般也和图像内物体边缘高度相关。...前人的工作是将图像信号投射(Splat)到双边空间，在双边空间中滤波(Blur)，再反投射(Slice)滤波后的图像信号到原始像素空间。...而Jon Barron的工作则是将所要求解的最小化问题投射(Splat)到双边空间，在双边空间中求解(Solve)该问题，再将求解结果重新投射(Slice)到原始空间。

8022 1

小白系列（5）| 计算机视觉：3D立体视觉

这类似于人类视觉的工作原理。我们大脑同时整合来自两只眼睛的图像，从而产生三维视觉：尽管每只眼睛只产生二维图像，但人脑可以通过结合两个视角并识别它们之间的差异来感知深度。我们称这种能力为立体视觉。...人脑的工作方式也是如此。它感知深度和三维形状的能力被称为立体视觉。 04 计算机系统如何实现立体视觉我们需要估计每个点的深度，从而从二维图像中生成三维图像。...深度是在连接两个相机的线上的垂直投影：上面的图像显示了从连接两个相机的线上的点的实际深度。让我们注意到线段和线段之间的角度并不完全是90度。...6.2 视差图视差是左右图像之间一个点的投影的水平位移。相反，深度是位于真实3D世界中的点的深度坐标。要从一对立体图像创建视差图，我们首先必须将左图像中的每个像素与右图像中的相应像素进行匹配。...我们使用这些距离数据生成一幅称为视差图的强度图像。要计算视差图，我们必须解决所谓的对应问题。这个任务旨在识别立体图像中的像素对，它们是空间中同一个实际物理点的投影。

4143 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭