前端学习----实现跑马灯的三种⽅式
参考博客:
⽂中提出了三种实现跑马灯的⽅式，分别是1.利⽤js实现2.利⽤html标签实现3.利⽤css实现⽂中也给出了3种⽅法优劣的⽐较，这⾥不再赘述1.利⽤js实现跑马灯
<div id="move">三玖是我⽼婆，春⽇野穹是我妹妹</div>
#move{position: absolute;width: 230px;background: grey;color:white;}
var ElementById('move');
move.style.right='-230px';
moveRight();
}
absolute relativefunction moveRight(){
if(parseInt(move.style.right)>screen.width) {
move.style.right='0';
}
move.style.right=parseInt(move.style.right)+3+'px';
setTimeout(moveRight,10);
}
这个就是利⽤js操控dom元素的属性利⽤setTimeout调⽤⾃⼰不断改变right的⼤⼩进⾏移动
2.利⽤html 实现
这个是利⽤marquee标签实现
3.利⽤css 实现
//html
<div id="move">
<div id="cont">三玖是我⽼婆，春⽇野穹是我妹妹</div>
</div>
// css
#move{
position: relative;
width: 230px;
height: 40px;
background: grey;
color:white;
}
#cont{
position:absolute;
left: 0;
right: 0;
transition: left 10s linear;
}
//js
var ElementById('cont');
cont.style.left="-230px";
}
利⽤transition实现跑马灯效果
css实现⽆缝滚动
//html
<div id="move">
<div id="cont">
<div class="text">1三玖是我⽼婆，春⽇野穹是我妹妹</div>
<div class="text">2三玖是我⽼婆，春⽇野穹是我妹妹</div>
</div>
</div>
//css
*{
padding: 0;
margin:0;
}
#move{
position: relative;
width: 230px;
height: 20px;
background: grey;
color:white;
overflow: hidden;
}
#cont{
width: 200%;
height: 20px;
position:absolute;
left: 0;
top: 0;
animation:5s move infinite linear;
}
#cont .text{
display: inline-block;
float: left;
width: 50%;
height: 20px;
}
@keyframes move{
0%{
left: 0;
}
100%{
left: -100%;
}
}
利⽤animation实现⽆缝滚动当然实际上是利⽤了2条相同的数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。