文字向左无缝滚动marquee

薇光网站建设

于 2021-06-15 12:40:40 发布

阅读量3.4k

点赞数 1

分类专栏： Javascript 实例文章标签： javascript html5 html jquery css3

本文链接：https://blog.youkuaiyun.com/qq_17475727/article/details/117922106

版权

Javascript 实例专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用HTML5的marquee标签来创建文字无缝向左滚动的效果。尽管该方法可能已较为传统，但在某些场景下仍能有效解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字向左无缝滚动 marquee 标签

用这个标签做滚动可能已经过时了，但真的是狠好用，超级解决问题！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
.scrollbox{background:#f60;width:384px;padding:0 10px;overflow: hidden; white-space:nowrap;height: 40px;line-height: 40px;}
.scrollbox h1{color: #fff;font-family:微软雅黑!important;font-weight: bold;font-size: 24px;}
</style>
</head>
<body>

<div class="scrollbox">

	<marquee name=news behavior=scroll direction=left scrollamount=2 scrolldelay=1 hspace=0 vspace=0 onMouseOver="this.stop()" onMouseOut="this.start()" >
		
		<h1>滚动测试内容测试内容测试内容，滚动测试内容测试内容测试内容</h1>

	</marquee>
</div>

<script>
<!-- Begin
var ostat = false;
function scrollstop() {
news.scrollAmount = 0;
ostat = true;
}
function scrollplay() {
news.scrollAmount = 5;
ostat = false;
}
function scrolldir() {
mid = screen.width / 2;
mouse = event.x;
if(mouse > mid) {
if(ostat == false) {
speed = (mouse - mid) / 25;
news.scrollAmount = speed;
}
news.direction = "right";
}
else {
if(ostat == false) {
speed = (mid - mouse) / 25;
news.scrollAmount = speed;
}
news.direction = "left";
}
}
//  End -->
</script>
</body>
</html>