廊坊网站制作工具,网站月流量5g,源码怎么做网站,wordpress is电影主题一. 背景
在前端开发中#xff0c;不少网站和应用都会运用到动态效果来吸引用户的注意#xff0c;并提升用户体验。文字跑马灯是一种常见的动态效果#xff0c;通过文字不断滚动来展示内容#xff0c;吸引用户的注意力。
最近的一个项目就需要实现文字跑马灯效果#xf…一. 背景
在前端开发中不少网站和应用都会运用到动态效果来吸引用户的注意并提升用户体验。文字跑马灯是一种常见的动态效果通过文字不断滚动来展示内容吸引用户的注意力。
最近的一个项目就需要实现文字跑马灯效果来向用户展示一些公告信息。具体需求是当文本超出页面宽度时需要文字滚动否则不进行滚动。
其实在 HTML 元素中marquee 元素是原生的文字滚动组件遗憾的是不支持自动判断文字宽度是否超出页面而且该元素已弃用官方已不再建议使用了。
因此本篇文章通过简单的思路及原理分析来实现文字跑马灯效果轻松实现文字的自动按需滚动。
二. Marquee 元素
在进行自己实现文字跑马灯效果之前我们先来看一下 HTML 元素中的marquee 元素。
HTML marquee 元素marquee用来插入一段滚动的文字可以使用它的属性控制当文本超出容器时实现文字滚动效果。 注意 marquee 元素已经过时官方建议不要再使用。可能一些浏览器仍然支持它或许不久从相关的 web 标准中移除请尽量不要使用该特性因为可能该特性随时可能无法正常工作 虽然已经移除我们可以学习一下marquee的滚动 API借鉴一下来拓展一下思路
简单说几个重点的 API behavior文本在 marquee 元素内如何滚动。 scrollslide 和 alternate。默认值为 scroll。 bgcolor颜色名称或十六进制值设置背景颜色。 scrollamount每次滚动时移动的长度单位像素。默认值为 6。 direction文本滚动的方向。可选值有 left, right, up and down。默认值为 left。 loop文本滚动的次数。如果未指定值默认值为 −1表示 marquee 将连续滚动。 width宽度单位像素或百分比值。 height高度单位同上。
遗憾的是我查看了它的所有 API发现它并不支持自动判断文字宽度的操作。下面我以一个简单的例子使用 marquee 实现滚动效果
marquee loop-1 behaviorscroll directionleft width200 bgcolorredThis text will scroll from right to left
/marquee通过以上简单的代码marquee版的文字滚动就实现了如下所示 由于marquee元素已被官方弃用同时也不支持配置动态滚动更多详细内容文档参考marquee MDN 文档
因此接下来我们自己实现一个文字跑马灯效果。
三. 如何实现文字滚动的分析
需求分析实现一款文字跑马灯效果同时需要自动判断文本内容的宽度如果超出容器宽度则进行文本滚动显示否则文本不进行滚动。
思路分析 判断容器的宽度和文字内容的宽度当文字宽度大于容器宽度时文字滚动当文字宽度小于容器宽度时文字不滚动。 实现滚动动画当文字超出容器时文字由左向右的进行循环滚动。
因此实现这个组件的的重点就是以上思路分析中的要点接下来我们看一下如何实现
1. 第一步判断文字是否超出容器
判断文字是否超出容器具体操作为判断文字的内容宽度 容器的宽度而获取这两个元素的宽度可以通过以下这两个 API 来获取 获取文字的宽度el.getBoundingClientRect().width。 获取容器的宽度el.clientWidth。 当 el.getBoundingClientRect().width el.clientWidth则需要滚动。
说明el.getBoundingClientRect().width 和 el.clientWidth 是用来获取元素宽度的两种属性它们之间有一些区别理解好这两个区别就成功了一半。
① el.getBoundingClientRect().width
el.getBoundingClientRect() 获取的是 DOM 元素相对于窗口的坐标集合集合中有多个属性其中的 width 属性就是相对于视口的元素的宽度。 通过调用元素的 getBoundingClientRect() 方法来获取元素相对于视口的位置信息并返回一个包含元素位置、尺寸等属性的 DOMRect 对象。 width 属性表示元素的宽度包括元素的内容、内边距和边框但不包括外边距。它会计算元素的实际宽度包括可能存在的滚动条。 因为 width 属性是相对于视口的所以当页面发生滚动时元素的位置和尺寸可能会发生改变。
② el.clientWidth
获取元素可视部分的宽度通过 el.clientWidth 这个 API 来获取如下图所示浏览器常用高度的示意图从图中很清晰的可以看到clientWidth指示。 通过调用元素的 clientWidth 方法用来获取元素的内容宽度包括内边距但是不包括边框和外边距。 clientWidth 通常用来获取元素可视部分的宽度即不包括滚动条和隐藏部分的宽度。 clientWidth 不会受到页面滚动的影响它表示的是元素在不考虑滚动的情况下的宽度。
综上所述el.getBoundingClientRect().width 返回的是元素相对于视口的位置和尺寸信息中的宽度包含了内边距和边框并可能受到滚动的影响而 el.clientWidth 获取的是元素内容部分的宽度不包括内边距和边框也不受滚动的影响。
因此根据具体的需求获取文字的宽度使用的是el.getBoundingClientRect().width而获取容器的宽度使用的是el.clientWidth。
div classmarquee-containerdiv classmarquee-text这是一段需要滚动显示的文本内容/div
/div2. 第二步滚动的动画实现
要实现文字从左到右依次滚动的效果关键在于下面两点 设置父级容器的样式当文字超出时藏超出容器宽度的部分 动画 animation 的实现通过 keyframes 实现一个从左到右滚动的动画效果
示例代码如下所示
div classscroll-containerspan classscroll-text这里是需要滚动的文本内容/span
/div
style.scroll-container {width: 100%;overflow: hidden;}.scroll-text {white-space: nowrap;animation: scrollRight 5s linear infinite;display: inline-block;}keyframes scrollRight {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
/style在上面的 CSS 样式中 scroll-container 元素设置了 overflow: hidden;用来隐藏超出容器宽度的部分。 scroll-text 元素使用 white-space: nowrap; 来防止文字换行display: inline-block; 让文本水平排列。 animation 属性定义了一个名为 scrollRight 的动画持续时间为 5 秒线性匀速运动无限循环。 keyframes 定义了一个从左到右滚动的动画效果从初始位置translateX(0)到 -100% 的水平偏移实现文字从左到右滚动。
在必要时也可以使用 JavaScript 控制动画的开始、暂停和重新开始。例如可以通过 JavaScript 动态添加或移除动画类名来控制滚动效果的启停。
const scrollText document.querySelector(.scroll-text);// 暂停滚动
function pauseScroll() {scrollText.style.animationPlayState paused;
}// 重新开始滚动
function resumeScroll() {scrollText.style.animationPlayState running;
}通过上述代码的编写即可实现文字从左到右依次滚动的效果。当页面加载时文字将开始滚动在需要暂停或重新开始时可通过 JavaScript 来实现相应的操作。 四. 完整示例分析
1. 基本实现原理分析 首先通过 JavaScript 获取文本容器和文本内容元素。 判断文本内容的宽度是否超出容器的宽度如果超出则添加滚动样式否则移除滚动样式。 CSS 样式定义了一个 marquee 动画使文本内容在容器内水平滚动显示。动画从右侧向左侧滚动持续时间为 5 秒速度线性无限循环。 添加 white-space: nowrap; 样式确保文本内容不换行实现水平滚动效果。 使用 overflow: hidden; 样式来隐藏超出容器的文本内容实现跑马灯效果。
2. HTML 结构
div classmarquee-containerdiv classmarquee-text这是一段需要滚动显示的文本内容/div
/div3. CSS 样式
.marquee-container {width: 200px; /* 容器宽度 */overflow: hidden; /* 内容超出时隐藏 */
}.marquee-text {white-space: nowrap; /* 内容不换行 */display: inline-block;
}.marquee-text-animation {animation: marquee 5s linear infinite; /* 滚动动画时间可根据需要调整 */
}keyframes marquee {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}
}4. JavaScript 实现
// 获取文本容器和文本内容元素
const container document.querySelector(.marquee-container);
const text document.querySelector(.marquee-text);// 判断文本内容是否超出容器宽度
if (text.getBoundingClientRect().width container.clientWidth) {text.classList.add(marquee-text-animation); // 添加滚动样式
} else {text.classList.remove(marquee-text-animation); // 移除滚动样式
}通过以上实现原理和示例代码可以实现一个简单的文字跑马灯组件具体的演示效果如下图所示同时你也可以根据实际需要对样式和滚动效果进行调整。
当文本内容宽度未超出容器宽度时文本内容保持静态显示即可。 当文本内容宽度超出容器宽度时文本会自动滚动显示 五. 总结
在本文中我们详细分析了如何实现文字跑马灯效果通过判断文字内容是否超出容器进而实现自动滚动的功能为网站添加了一个引人注目的动画效果。下面我来进行总结一下实现文字滚动效果有以下几个要点 判断文字的宽度是否超出使用el.getBoundingClientRect().width API 获取文字的宽度使用 el.clientWidth API 获取容器的宽度当 el.getBoundingClientRect().width el.clientWidth触发文字滚动。 实现文字滚动动画使用 transform 动画实现文字滚动效果。
文字跑马灯作为一种常见的动画效果可以吸引用户的注意力。当然本文只是在实现方式及实现原理上进行详细分析你可以在了解这些之后对其进行更加具体的改造比如动画效果、文字背景、上下滚动、操作暂停等等。
希望通过本文的学习可以让你对文字跑马灯有了更深入的理解 如果您感觉文章还不错点个赞再走吧
