Marquee滚动结束事件及重新播放：使用JavaScript实现
在HTML中，'marquee'标签是一个可以用来创建滚动文本或图像的元素。然而，'marquee'标签本身并没有提供滚动结束事件或重新播放的功能。
要实现滚动结束事件，可以使用JavaScript来监测'marquee'元素的滚动状态。可以通过检查'marquee'元素的scrollLeft或scrollTop属性来判断滚动是否结束。
下面是一个示例代码，演示了如何在滚动结束时触发一个事件：
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 200px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div class='marquee' onscroll='checkScrollEnd()'>
<marquee behavior='scroll' direction='left'>滚动的文本或图像</marquee>
</div>
<script>
function checkScrollEnd() {
var marquee = document.querySelector('.marquee');
if (marquee.scrollLeft === (marquee.scrollWidth - marquee.clientWidth)) {
console.log('滚动结束');
// 在这里执行滚动结束后的操作
}
}
</script>
</body>
</html>
要重新播放'marquee'，可以使用JavaScript来重置'marquee'元素的scrollLeft或scrollTop属性，使其回到起始位置。
下面是一个示例代码，演示了如何重新播放'marquee'：
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 200px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<div class='marquee' onscroll='checkScrollEnd()'>
<marquee behavior='scroll' direction='left'>滚动的文本或图像</marquee>
</div>
<script>
function checkScrollEnd() {
var marquee = document.querySelector('.marquee');
if (marquee.scrollLeft === (marquee.scrollWidth - marquee.clientWidth)) {
console.log('滚动结束');
// 重新播放
marquee.scrollLeft = 0;
}
}
</script>
</body>
</html>
以上是使用JavaScript来实现滚动结束事件和重新播放'marquee'的方法。请注意，'marquee'标签已被弃用，不推荐在现代web开发中使用。可以使用CSS的animation或transition属性来替代'marquee'标签，实现更灵活的滚动效果。
原文地址: https://www.cveoy.top/t/topic/qdrW 著作权归作者所有。请勿转载和采集!