标签:ext 列表 charset padding style 个人 title pre flow
<!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>明天你是否会想起曾经我写的日记</li> <li>一个人的时候不是不像你</li> <li>一个人的时候只是怕想你</li> <li>一个人的时候如果下起了雨</li> <li>我也会学你把伞丢到一边</li> <li>七月份的尾巴你是狮子座</li> </ul> </div> </body> </html>
标签:ext 列表 charset padding style 个人 title pre flow
原文地址:http://www.cnblogs.com/shoolnight/p/6409448.html