文字上下轮播效果
<!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>