不同样式的垂直滚动：
无缝垂直滚动；
间歇性垂直滚动（一次滚动一条）；
间歇性垂直滚动（一次滚动两条）；
变量解释：
speed：滚动的速度；
delay：暂停的时长；
scrollTop ：滚动的高度；
scrollHeight：滚动元素的高度；
1. 无缝垂直滚动（无停歇的一直滚动）
<!doctype html>
<body>
<div class="out" id="roll">
<div>111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
<div>66666666</div>
<div>777777777777</div>
<div>888888888888</div>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="application/javascript">
var speed = 100;
window.onload = function(){
var area = document.getElementById("roll");
area.innerHTML += area.innerHTML;
function scroll(){
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
setInterval(scroll,speed);
}
</script>
</body>
</html>
2. 间歇性垂直滚动（一次滚动一条）
<!doctype html>
<body>
<div class="out" id="roll">
<div>111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
<div>66666666</div>
<div>777777777777</div>
<div>888888888888</div>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="application/javascript">
var speed = 100;
var delay = 2000;
var height = 21;
var time;
window.onload = function(){
var area = document.getElementById("roll");
area.innerHTML += area.innerHTML;
function scroll(){
if(area.scrollTop % height == 0){
clearInterval(time);
setTimeout(start,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop = 0;
}
}
}
function start(){
time = setInterval(scroll,speed);
area.scrollTop++;
}
setTimeout(start,delay);
}
</script>
</body>
</html>
3. 间歇性垂直滚动（一次滚动两条）
<!doctype html>
<body>
<div class="out" id="roll">
<div>111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>44444444444</div>
<div>555555555</div>
<div>66666666</div>
<div>777777777777</div>
<div>888888888888</div>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="application/javascript">
var speed = 100;
var delay = 2000;
var height = 42;
var time;
window.onload = function(){
var area = document.getElementById("roll");
var counts = $("#roll").find("div").length;
area.innerHTML = area.innerHTML + area.innerHTML + area.innerHTML;
function scroll(){
if(area.scrollTop % height == 0){
clearInterval(time);
setTimeout(start,delay);
}else{
area.scrollTop++;
if(counts % 2 ==0 ){
if(area.scrollTop >= area.scrollHeight/3){
area.scrollTop = 0;
}
}else{
if(area.scrollTop >= area.scrollHeight*2/3){
area.scrollTop = 0;
}
}
}
}
function start(){
time = setInterval(scroll,speed);
area.scrollTop++;
}
setTimeout(start,delay);
}
</script>
</body>
</html>
公众号：
微信：
