文字无缝信息滚动:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>信息滚动</title> <style type="text/css"> *{margin: 0px;padding: 0px;} ul{list-style: none;} #hh{ 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;} </style> </head> <body> <div id="hh"> <ul id="con1"> <li>1、大叔过一会你就是昆明大理石密度法规和女的名称是</li> <li>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li> <li>3、是水水水水水水水水水水水水水水水水</li> <li>4、人人人人人人人人人人人人人人人人人人人人人人人</li> <li>5、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li> <li>6、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li> <li>7、天天天天天天天天天天天天天天天天天天天天天</li> <li>8、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li> <li>9、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li> <li>10、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li> <li>11、天天天天天天天天天天天天天天天天天天天天天</li> <li>12、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li> </ul> <ul id="con2"></ul> </div> <script type="text/javascript"> var hh=document.getElementById('hh'); var con1=document.getElementById('con1'); var con2=document.getElementById('con2'); var time=50; hh.scrollTop=0; con2.innerHTML=con1.innerHTML; function scrollUp(){ if (hh.scrollTop>=con1.offsetHeight) { hh.scrollTop=0; }else{ hh.scrollTop++; } } var myScroll=setInterval('scrollUp()',time); hh.onmouseover=function(){ clearInterval(myScroll); } hh.onmouseout=function(){ myScroll=setInterval('scrollUp()',time); } </script> </body> </html>
间歇性信息滚动:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>间歇性信息滚动</title> <style type="text/css"> *{margin: 0px;padding: 0px;} ul{list-style: none;} #hh{ 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;} </style> </head> <body> <div id="hh"> <ul id="con1"> <li>1、大叔过一会你就是昆明大理石密度法规和女的名称是</li> <li>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li> <li>3、是水水水水水水水水水水水水水水水水</li> <li>4、人人人人人人人人人人人人人人人人人人人人人人人</li> <li>5、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li> <li>6、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li> <li>7、天天天天天天天天天天天天天天天天天天天天天</li> <li>8、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li> <li>9、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li> <li>10、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li> <li>11、天天天天天天天天天天天天天天天天天天天天天</li> <li>12、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li> </ul> <ul id="con2"></ul> </div> <script type="text/javascript"> var hh=document.getElementById('hh'); var con1=document.getElementById('con1'); var con2=document.getElementById('con2'); var time=50; var liheight=24; hh.scrollTop=0; con2.innerHTML=con1.innerHTML; function starMove(){ hh.scrollTop++; myScroll=setInterval('scrollUp()',time); } function scrollUp(){ // hh.scrollTop++; if(hh.scrollTop%liheight==0){ clearInterval(myScroll); setTimeout('starMove()',2000); }else{ hh.scrollTop++; if (hh.scrollTop>=hh.scrollHeight/2) { hh.scrollTop=0; } } } setTimeout('starMove()',2000); </script> </body> </html>