这是一款基于原生 JavaScript、CSS 变换与本地图片技术实现的带惯性和波浪起伏的横向相册。一组照片横向铺开,移动时各图片在不同相位上下起伏,像一条缓慢波动的图带。滚轮、拖拽和方向键都能推动浏览,松开后还有短暂惯性。页面提供加载提示与全屏按钮,适合摄影展示和沉浸式图片专题。
横向照片带如何连接惯性和连续起伏
图片宽度参与位置计算。脚本记录每张图的宽度和累计偏移,让不同构图连续衔接。
波浪以位置和相位计算。每张图在同一条波形上取值,起伏能保持连续。
多个输入入口共享惯性。滚轮、鼠标拖动、触摸和方向键都可驱动当前滚动状态。
累计宽度与正弦波怎样定位每张照片
相册维护横向位置与速度,再用正弦函数计算每张图的纵向偏移。图片加载完成后才建立尺寸缓存,窗口变化时重新定位。源码拼接中断问题已修复,避免主流程结束后调用错误影响附加功能。
amplitude: 40,
波浪相册的图片与运动幅度在哪里修改
照片列表在 script.js 的 imageUrls,波高、频率、速度与惯性参数也在脚本;照片资源在 img,容器和提示样式在 style.css。替换图片后应确认加载完成逻辑能取得尺寸,避免某张失效图片阻断展示。
波浪图带嵌入页面时的操作问题
鼠标滚轮为什么会横向移动?
脚本把滚轮输入映射到相册横向位置,这是当前主要浏览方式之一。嵌入普通长页面时,应限制事件作用区域。
照片一定要同样宽高吗?
不必完全一致,但尺寸差异会影响节奏。建议保持合理高度,并检查累计宽度和裁切方式。
可以关闭波浪只保留横向相册吗?
可以将波幅减小到零,再按需要保留惯性和拖拽逻辑。
适合摄影长廊、沉浸相册和横向专题展示。下载后可查看横向波浪带的完整结构与参数,按自己的内容继续调整。