文字上下轮播效果
作者：互联网
文字上下轮播效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
top: 100px;
position: relative;
border: 1px solid black;
width: 300px;
height: 300px;
margin: 10px auto;
overflow: hidden;
background-color: lightblue;
}
#div1 ul {
position: absolute;
left: 0;
}
#div1 ul li {
list-style: none;
float: left;
width: 200px;
height: 30px;
padding: 10px;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var timer = null;
var iSpeed = -5;
oUl.innerHTML += oUl.innerHTML;
oUl.style.height = aLi.length * aLi[0].offsetHeight + 'px';
timer = setTimeout(fnMove, 100);
oDiv.onmouseover = function() {
clearInterval(timer);
}
oDiv.onmouseout = function() {
clearInterval(timer);
timer = setInterval(fnMove, 100);
}
function fnMove() {
if (oUl.offsetTop < -oUl.offsetHeight / 2) {
oUl.style.top = 0;
}
oUl.style.top = oUl.offsetTop + iSpeed + 'px';
if ((oUl.offsetTop % 50) == 0) {
clearInterval(timer);
timer = setTimeout(fnMove, 2000);
} else {
clearInterval(timer);
timer = setTimeout(fnMove, 100);
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
标签：文字,style,轮播,oUl,fnMove,timer,上下,var,div1 来源： https://www.cnblogs.com/siyueshini/p/14473600.html