之前写的滚动的感觉不好,那个主要是当时用在项目当中的,现在重新写了个
.box{
margin: 100px auto;
width:1000px;
height:50px;
border: 1px solid red;
border-radius: 10px;
overflow: hidden;
position:relative;
}
.text{
line-height: 50px;
position:absolute;
top:0;
}
<div class="box">
<span class="text">我是滚动的文字,hahahwa</span>
</div>
<script>
var text=document.querySelector('.text');
var box=document.querySelector('.box');
var left=box.offsetWidth;
var textLength=text.offsetWidth;
text.style.width=textLength+'px';
text.style.left=left+'px';
function move(){
left--;
if(left<-textLength){
left=box.offsetWidth;
}
text.style.left=left+'px';
window.requestAnimationFrame(move);
}
window.requestAnimationFrame(move);
</script>
这个是用纯js写的,没有使用框架,
window.requestAnimationFrame是浏览器自带的,可以让动态效果更流畅,