我们在浏览网页的时候经常看到滚动的公告栏,或是图片栏。html标签中marquee标签能实现滚动,但是它的滚动是不连续的,中间有一定的间断,使用js也能轻松实现marquee的滚动效果,而且还能无缝滚动,下面我们就来看看到底是怎么实现的吧。
首先我们的创建一个的div,再在这个div中包两个大小相等的div盒子。然后设置大盒子overflow:hidden;
<html>
<head>
<title>文字滚动</title>
<style type="text/css">
#con{
width: 200px;
height: 500px;
border: 1px solid red;
overflow: hidden;
}
.con1{
width: 200px;
height: 500px;
background: red;
position: relative;
top:0px;
}
.con2{
width: 200px;
height: 500px;
background: blue;
position: relative;
}
</style>
</head>
<body>
<div id='con'>
<div class='con1' id='con1' style="top:0">
</div>
<div class='con2' id='con2' style="top:0">
</div>
</div>
</body>
</html>
js部分:让两个盒子都向上滚动,当滚动到一定位置的时候让他们初始化
function move(){
var div1=document.getElementById('con1');
var div2=document.getElementById('con2');
if(div1.style.top=='-500px'){
div1.style.top='0px';
div2.style.top='0px;'
}
div1.style.top=parseInt(div1.style.top)-1+'px';
div2.style.top=parseInt(div1.style.top)-1+'px';
console.debug(div2.style.top);
}
setInterval(move,100);