实现文字滚动播放
实现文字滚动播放
WindRunnerMax
发布于 2021-01-26 14:37:06
发布于 2021-01-26 14:37:06
代码可运行
运行总次数：0
代码可运行
实现文字滚动播放
实现文字滚动播放，通过使用CSS3动画与Js控制来实现，由于使用CSS动画来控制偏移限制较多，因此通常还是使用Js来实现。
实现
CSS Animation
使用CSS动画方法，使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。此方法的主要问题在于left是100%是相对于父级元素的宽度来说的，因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度。
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation</title>
<style type="text/css">
.container{
border: 1px solid #eee;
overflow: hidden;
display: inline-block;
}
@keyframes text-scroll {
0% {
left: 100%;
}
25% {
left: 50%;
}
50% {
left: 0%;
}
75% {
left: -50%;
}
100% {
left: -100%;
}
}
.text {
position: relative;
animation: text-scroll 5s linear infinite;
}
</style>
</head>
<body>
<div class="container">
<div class="text">循环滚动播放滴滴答答滴滴答答滴滴答答</div>
<div>
</body>
</html>使用CSS动画方法，使用transform: translateX()属性来控制文字元素距离左侧相对偏移的距离，此方法同样也存在上述的问题。
<!DOCTYPE html>
<html>
<head>
<title>CSS Animation</title>
<style type="text/css">
.container{
border: 1px solid #eee;
overflow: hidden;
display: inline-block;
}
@keyframes text-scroll {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.text {
animation: text-scroll 5s linear infinite;
}
</style>
</head>
<body>
<div class="container">
<div class="text">循环滚动播放滴滴答答滴滴答答滴滴答答</div>
<div>
</body>
</html>JavaScript
使用Javascript我们能够实现无缝滚动，即需要复制一份一样的元素至原元素的后方，当第一个元素滚动完成后我们立即将位置复原。
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<style type="text/css">
.container{
display: flex;
border: 1px solid #eee;
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
.text{
padding: 0 5px;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="text">循环滚动播放滴滴答答滴滴答答滴滴答答</div>
<div>
</body>
<script type="text/javascript">
(function(win, doc){
const container = doc.querySelector(".container"); // 容器元素
const textNode = doc.querySelector(".container > .text"); // 文字元素
container.appendChild(textNode.cloneNode(true)); // 复制元素到后方
const textWidth = textNode.offsetWidth; // 获取文字元素宽度
let count = container.offsetWidth; // 初始化向左偏移为容器大小
const loop = () => {
if(count <= -textWidth) { // 如果文字偏移超出一个文字元素的宽度则复原
textNode.style["margin-left"] = 0; // 复原
count = 0; // 复原
}
textNode.style["margin-left"] = `${count--}px`; // 继续向左移动
window.requestAnimationFrame(() => loop()); // 动画递归调用
}
window.requestAnimationFrame(() => loop()); // 启动动画
// requestAnimationFrame当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，setInterval需要使用加入visibilitychange监听来清除与重设定时器
})(window, document);
</script>
</html>每日一题
https://github.com/WindrunnerMax/EveryDay参考
https://zhuanlan.zhihu.com/p/101107612本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-01-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
