水平滚动的有趣JavaScript效果

最新推荐文章于 2025-08-15 15:39:52 发布

原创最新推荐文章于 2025-08-15 15:39:52 发布 · 198 阅读

标签

#javascript #开发语言 #ecmascript #JavaScript

收录于

JavaScript 专栏收录该内容

169 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何使用JavaScript和CSS创建水平滚动效果，提供HTML结构、CSS样式和JavaScript动画实现方法，实现内容的无限循环滚动，提升网页用户体验。

在网页设计和开发中，我们经常需要实现一些吸引人的效果来增强用户体验。一个受欢迎的效果是水平滚动，它可以让内容以水平方向连续滚动，给用户带来一种有趣的感觉。在本文中，我们将学习如何使用JavaScript来实现水平滚动效果。

实现水平滚动的关键在于使用CSS和JavaScript来控制元素的位置和动画。我们将使用CSS的transform属性来改变元素的位置，并使用requestAnimationFrame方法来创建平滑的动画效果。

首先，让我们创建一个HTML结构，其中包含一个包裹内容的容器元素和一个需要水平滚动的内容元素。我们可以使用如下的HTML代码：

<div class="container">

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZuqCloud

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

js 文字横向滚动

01-21

简单、实用的javascript文字横向滚动效果。

HTML5+CSS3+JS小实例：鼠标滚轮水平滚动

艾恩小灰灰的博客

10-02

1496

实例：鼠标滚轮水平滚动。技术栈：HTML+CSS+JS。

参与评论您还未登录，请先登录后发表或查看评论

JavaScript技巧：实现水平循环滚动的Marquee效果

TechNovaX的博客

09-24

668

通过以上的HTML、CSS和JavaScript代码，我们可以实现一个简单的水平循环滚动（Marquee）效果。你可以根据实际需求调整容器的宽度、高度和滚动速度，以及内容的样式，来满足你的需求。首先，我们需要一个容器元素来包含需要滚动的内容。我们可以使用一个div元素，并设置固定的宽度和高度，以及overflow属性为hidden，来隐藏超出容器的内容。接下来，我们复制内容元素，并将其附加到容器的末尾，以实现循环滚动的效果。变量的值，并在内容滚动到末尾时将其重置为0，我们可以实现循环滚动的效果。

js水平自定义滚动，实现拖动效果

weixin_58688577的博客

08-30

798

js水平横向滚动条自定义

设置水平、垂直滚动条自动滚动

ll397879213的专栏

07-22

4669

在做一个小项目时遇到需要随着手势翻页的同时，上面导航栏也需要随着而滑动，这样就需要在手势事件中调用滚动条的水平滑动事件。总体效果图如下：滚动部分布局XML片段： <HorizontalScrollView android:id="@+id/horizonMenu" android:layout_width="match_parent"

js水平轮播

隅寒的博客

02-19

326

一、实现功能（1）左右点击水平轮播（2）下方小按钮点击轮播（3）自动轮播（4）鼠标放置在图片上停止轮播，移开继续轮播二、遇见问题及解决方案 1.z-index:999 图片设置在文字上方 2. !important 优先级设置为最高 3.list.style.left = -liWidth +'px' 跳到最后一个图片再点击下一个时，使长度为第一个图片陷进屏幕里不被看到的负值，再跳转到第...

html 文字、图片水平无限滚动

最新发布

weixin_42230607的博客

08-15

801

htmltable {th, td {th {pre {简介：在网页设计中，水平滚动图片展示是常见需求，特别是用于产品展示和新闻板块。本资源通过CSS样式和JavaScript脚本的结合，为初学者提供了一个水平滚动展示图片的实用解决方案。CSS负责布局、样式和动画效果，而JavaScript处理事件监听、动态改变样式、控制逻辑和用户体验优化。整个组件通过静态和动态的结合，为用户提供流畅、连续的滚动体验，适合有限空间内展示大量图片的场景。

Js实现文字水平滚动

xiji666

12-23

1051

公司项目中有一个公告栏，写的时候我先想到了用marquee，于是发现了marquee有很多弊端，当文字全部显示完才出现新的文字，这样不是很友好，然后一查发现marquee这个标签已经被W3C标准废弃了，也就是不再支持使用这个标签了，于是我便用js+css去替代这个写法，并且做到类似无缝滚动的效果。直接上代码： html代码 <div id="scroll_div" class="fl...

34. 打字机效果 & 水平滚动贴合

粉丝们务必加入微信粉丝群

08-30

1004

需要注意的是,虽然滚动贴合是一个强大的工具,但它不应该被过度使用。确保贴合点是逻辑的,增强了用户体验,而不是喧宾夺主。过度使用或在不恰当的地方使用可能会分散用户的注意力,或使你的页面难以阅读。这个技巧创建了一个水平滚动的图片库,当用户停止滚动时,图片会自动贴合到视口的中心。它告诉浏览器,滚动应该在水平方向上"贴合",并且贴合是强制性的,意味着滚动将总是结束于一个贴合点。你可以通过改变网格的尺寸、图片的样式或贴合的位置来轻松定制这个效果。这定义了每个元素应该贴合的位置——在这种情况下,是在容器的中心。

原生JS实现页面平滑滚动

Jay的博客

01-27

1万+

前言页面平滑滚动是网页一种常见的效果。那如何用原生的JS实现这也效果呢？原理平滑滚动的原理其实很简单。无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置。故而，要实现平滑滚动效果，我们就要知道“起始位置”、“结束位置”以及“如何让页面从一个点到另一个点”。获取起始位置和终点位置想要获取起始位置和终点位置，那就必须确定参考点。在网页中，常用的参考点是页面左上角。（注意，我这里所要实现...

js水平无缝滚动代码实例详解

Return_KB的博客

01-17

5146

本章节分享一段代码实例，它实现了图片无缝水平滚动效果。这样的功能在实际应用中比较常见，感兴趣的朋友可以做一下参考。代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/&

如何控制滚轮横向滑动(原生JS实现方法)

weixin_46022934的博客

10-22

8742

控制滚轮横向滑动解决思路如下 `1.如何在页面中展示横向滚动条` `2.如何获取鼠标的【滚动轮】` `3.通过什么Api去实现滚动效果 ` 一、如何创建横向滚动条 1.代码如下(HTML和CSS) 2.效果如下图所示: 二、鼠标滚动轮事件(mousewheel和wheel事件) 1.wheel鼠标滚轮(完美支持所有浏览器) JS代码如下所示: `*&*需要注意的事项(wheel滚动方向)*&*`: 2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel) 测试效果图如下

js实现水平滑动和垂直滑动

xyr05288的专栏

03-01

1万+

一.水平滑动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平滚动</title> <style type="text/css"> #gongao{ width:1000px;height:30px;overflow:h

垂直滚动和水平滚动_无限滚动的垂直菜单

culiao9310的博客

09-29

492

View demo 查看演示Download Source 下载源Note: from now on I’m planning to release simple “components” and explain their basic working principle in tiny articles. In this first one I’m goi...

【实战】前端必会 —— 纯css实现列表水平滑动（图片或文字内容不限）

程序边界

09-15

1017

移动端页面（H5 或小程序）

js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

彭世瑜的博客

07-12

1万+

可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;

js、css分别实现元素水平垂直居中

十一月廿七风雨大作

01-12

6791

js实现元素水平垂直居中、css实现元素水平垂直居中css实现元素水平垂直居中【4行代码】js实现元素水平垂直居中【弄巧成拙】 css实现元素水平垂直居中【4行代码】 #div{ top:50%; left: 50%; transform: translate(-50%,-50%);} 解释： top、left 设为50%，是元素div基于父容器的长宽偏移50%； transform: translate(-50%,-50%)是元素div基于自身的长宽再反过来偏移50%；效果等同于如下js代码：

html js实现横向菜单,js实现水平滚动菜单导航

weixin_29290259的博客

06-16

1145

项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。先来看下最终效果：最终效果先看html结构:全单1全部菜2单全部3单菜单4全菜单全部5菜单全6单全6部菜单全菜7单全8单全部5菜单全6单全6部菜单全菜7单全8单全9部菜单全10单全11部单菜2单全菜12单全32部菜单说一下，末尾我给加了阴影的效果：.root:before{di...