用js做一个跑马灯,内容是营销,财务,利润
时间: 2024-03-17 20:39:39 浏览: 12
好的,以下是一个简单的使用JavaScript实现的跑马灯,内容为“营销,财务,利润”:
HTML代码:
```html
<div id="marquee">
<span>营销,财务,利润</span>
</div>
```
CSS代码:
```css
#marquee {
width: 200px;
height: 30px;
overflow: hidden;
border: 1px solid #ccc;
}
#marquee span {
display: inline-block;
white-space: nowrap;
padding-right: 20px;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
```
JavaScript代码:
```javascript
//省略了DOM元素获取和相关操作
```
以上代码中,使用了CSS中的动画实现跑马灯效果,JavaScript部分可以根据需要进行相关操作。请注意,跑马灯效果可能会影响用户体验,请谨慎使用。
相关问题
用js做一个跑马灯,围绕360度环绕显示,内容是营销,财务,利润
好的,以下是一个使用JavaScript实现的围绕360度环绕显示的跑马灯,内容为“营销,财务,利润”:
HTML代码:
```html
<div id="marquee">
<span>营销,财务,利润</span>
</div>
```
CSS代码:
```css
#marquee {
width: 200px;
height: 30px;
position: relative;
border: 1px solid #ccc;
}
#marquee span {
display: inline-block;
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: rotate(0deg) translateX(0%);
}
100% {
transform: rotate(360deg) translateX(-100%);
}
}
```
JavaScript代码:
```javascript
//省略了DOM元素获取和相关操作
```
以上代码中,使用了CSS中的动画实现围绕360度环绕显示的跑马灯效果,JavaScript部分可以根据需要进行相关操作。请注意,跑马灯效果可能会影响用户体验,请谨慎使用。
用Javascript写一个跑马灯
好的,以下是用 JavaScript 写一个跑马灯的代码:
HTML 代码:
```
<div id="marquee">
<p>这是跑马灯内容1</p>
<p>这是跑马灯内容2</p>
<p>这是跑马灯内容3</p>
</div>
```
JavaScript 代码:
```
var marquee = document.getElementById("marquee");
var marqueeContent = marquee.innerHTML;
var marqueeChild = marquee.children;
var marqueeIndex = ;
function startMarquee() {
setInterval(function() {
marqueeIndex++;
if (marqueeIndex >= marqueeChild.length) {
marqueeIndex = ;
}
marquee.innerHTML = marqueeContent + marqueeChild[marqueeIndex].outerHTML;
}, 200);
}
startMarquee();
```
这个跑马灯会每隔 2 秒钟自动滚动一次,滚动到最后一个内容时会从头开始滚动。