使用js写个跑马灯文字
时间: 2023-06-01 19:04:33 浏览: 95
以下是一个简单的Javascript跑马灯文字的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>跑马灯文字</title>
<style type="text/css">
#marquee {
overflow: hidden;
position: relative;
background-color: #eee;
height: 30px;
font-size: 20px;
font-weight: bold;
line-height: 30px;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div id="marquee">这是跑马灯文字,这是跑马灯文字,这是跑马灯文字,这是跑马灯文字,这是跑马灯文字。</div>
<script type="text/javascript">
// 获取跑马灯元素的宽度
var marqueeWidth = document.getElementById('marquee').offsetWidth;
// 设置跑马灯动画的持续时间
var duration = marqueeWidth / 50;
// 设置跑马灯动画的样式
document.styleSheets[0].addRule('@keyframes marquee', '0% { transform: translateX(0); } 100% { transform: translateX(-' + marqueeWidth + 'px); }', 0);
// 设置跑马灯动画的持续时间
document.styleSheets[0].addRule('#marquee', 'animation-duration: ' + duration + 's;', 0);
</script>
</body>
</html>
```
该示例使用CSS3动画实现跑马灯效果,通过Javascript动态计算文字宽度和设置动画持续时间来实现自适应效果。可以根据需要进行修改和定制。