代码如下<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>滚动</title> <style type="text/css"> *{margin: 0;padding: 0;font-size: 18px;} .body{width: 500px;margin: 0 auto;} #myscroll{width: 200px;height: 200px;float: left;} #scrollbox{width: 300px;height: 120px;overflow: hidden; float: left;} #con1{/*overflow: hidden;*/width: 300px;} ul{list-style: none;} li{height: 24px;overflow: hidden;} #scrollbox ul li a{text-decoration: none;color: #000;} </style></head><body><div class="body"> <div id="myscroll">站内公告：</div> <div id="scrollbox"> <ul id="con1"> <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a></li> <li><a href="#">2.tab页面切换效果（案例）</a></li> <li><a href="#">3.圆角水晶按钮制作（案例）</a></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a></li> <li><a href="#">5.分页页码制作（案例）</a></li> <li><a href="#">6.导航条菜单的制作（案例）</a></li> <li><a href="#">7.信息列表制作(案例)</a></li> <li><a href="#">8.下拉菜单制作(案例)</a></li> <li><a href="#">9.如何实现“新手引导”效果</a></li> </ul> <ul id="con2"> </ul> </div></div><script type="text/javascript"> var scrollbox=document.getElementById('scrollbox'); var con1=document.getElementById("con1"); var con2=document.getElementById("con2"); var delay=2000; var speed=50; var liheight=24; con2.innerHTML=con1.innerHTML; var timer; scrollbox.scrollTop=0; scrollbox.onmouseover=function(){ clearInterval(timer); } scrollbox.onmouseout=function(){ star(); } function star(){ scrollbox.scrollTop++; timer=setInterval(scrollUp,speed); } function scrollUp(){ if (scrollbox.scrollTop % liheight==0) { clearInterval(timer); setTimeout(star,delay); }else{ scrollbox.scrollTop++; if (scrollbox.scrollTop>=con1.offsetHeight) { scrollbox.scrollTop=0; } } } setTimeout(star,delay) </script></body></html>
添加回答
举报
0/150
提交
取消