干到开裂！上下左右⚡网页无限滑动⚡

合集 · 前端教程 (23)

Description

源代码链接：https://pan.baidu.com/s/1vl0gl6Dyjpam-OqRwh5vfw 
提取码：jiej
无限滑动示例网站：
https://www.jiejoe.com/photos
https://kirschberg.co.nz/archive
https://hsmkrt1996.com/archive
gsap文档：
https://gsap.com/docs/v3/GSAP/Tween
喜欢这个视频的话，就点个赞吧❤

Comments

Youarefortunate 2024-02-08

跟着敲完了，太强了，学习了

♥ 24 ↩ 11

改次昵称就要六个币 2024-02-06

想写个css效果聚合的网站，类似组件库那种，可以当做示例嘛JIEJOE[喜欢][喜欢]

♥ 5 ↩ 3

我想好好学前端 2024-02-06

巨佬，一直想弄一个立方体，立方体的每个面都可以实现与可视区域响应，每个面都可以随可视区域宽高变动，在每个面上加入不同的元素也可以实现响应式。但我一直没办法做出来，总是有一些问题，希望能得到解答

♥ 4 ↩ 4

嘎嘎嘎哈zxc 2024-02-15

一直监听会不会很耗性能

♥ 3 ↩ 1

杨柳willowtree 2024-02-17

设计没有灵感怎么办[笑哭]

♥ 2 ↩ 1

空佬的z字帽杀 2025-05-10

诶，大佬是从游戏背景视差效果汲取的灵感吗，感觉思路好像[打call][打call]

♥ 1 ↩ 1

话唠没话聊 2024-07-14

【关键词】: 无限滑动, 图片排列, 鼠标拖拽【摘要】: 本视频教程详细介绍了如何实现一个无限滑动的图片效果，包括基本原理、HTML结构、CSS样式和JavaScript逻辑。通过监听鼠标事件和动态调整图片位置，实现了图片在四个方向上的无缝衔接滑动。此外，还讨论了性能优化和适应不同屏幕尺寸的方法。【时间线】 - 0:00 🎬 介绍无限滑动效果的基本概念和预期效果 - 0:30 🧠 解释无限滑动的基本原理和实现思路 - 1:30 📄 展示预设的HTML结构，包含图片排列 - 2:30 🎨 简述CSS样式设置，特别是媒体查询和单位选择 - 3:00 🖥️ 开始编写JavaScript代码，初始化参数和监听事件 - 4:00 🔄 实现图片移动逻辑，处理图片超出容器边界的情况 - 5:30 🖱️ 添加鼠标事件监听，控制图片移动 - 7:00 🌐 初步完成无限滑动效果，但存在性能和体验问题 - 8:00 🚀 引入动画库JSAP进行优化，改善滑动流畅度 - 10:00 🔄 处理窗口尺寸变化对滑动效果的影响 - 12:00 🛠️ 完成所有优化步骤，确保代码无bug且适应性强 - 12:30 🎉 视频结束，鼓励观众点赞和订阅 --本内容由@DDD_cat生成，正在用心做一款AI工具~，欢迎访问我们的网站：https://ai.ddcatai.com, qq群：936605738

♥ 1