做成不同样式的垂直滚动:无缝垂直滚动,间歇性垂直滚动(一次滚动一条),间歇性垂直滚动(一次滚动两条);
*先上代码(想知道原理的请往后看)~~~~*
变量解释:
speed:滚动的速度;
delay:暂停的时长;
scrollTop :滚动的高度;
scrollHeight:滚动元素的高度;
1. 无缝垂直滚动(无停歇的一直滚动)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body{
background-color: #FFFFFF;
}
.out{
overflow: hidden;
height: 21px;
margin-top: 50px;
padding-left: 20px;
}
</style>
</head>
<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&l