                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動效果制作

大家?guī)兔纯矗瑸槭裁礇]有滾動的效果？

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?
#box{
?? ??? ??? ??? ?margin: 0 auto;
?? ??? ??? ??? ?width: 250px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?border: 1px solid #000;
?? ??? ??? ??? ?border-radius: 5px;
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ?}
?? ??? ??? ?ul{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?ul li{
?? ??? ??? ??? ?padding-top: 1px;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="box">
?? ??? ??? ?<ul id="con1">
?? ??? ??? ??? ?<li>1、第1條信息滾動</li>
?? ??? ??? ??? ?<li>2、第2條信息滾動</li>
?? ??? ??? ??? ?<li>3、第3條信息滾動</li>
?? ??? ??? ??? ?<li>4、第4條信息滾動</li>
?? ??? ??? ??? ?<li>5、第5條信息滾動</li>
?? ??? ??? ??? ?<li>6、第6條信息滾動</li>
?? ??? ??? ??? ?<li>7、第7條信息滾動</li>
?? ??? ??? ??? ?<li>8、第8條信息滾動</li>
?? ??? ??? ??? ?<li>9、第9條信息滾動</li>
?? ??? ??? ?</ul>
?? ??? ??? ?<ul id="con2">?? ??? ??? ?</ul>
?? ??? ?</div>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?var area=document.getElementById("box");
?? ??? ??? ?var con1=document.getElementById("con1");
?? ??? ??? ?var con2=document.getElementById("con2");
?? ??? ??? ?con2.innerHTML=con1.innerHTML;
?? ??? ??? ?area.scrollTop=0;
?? ??? ??? ?var time=50;
?? ??? ??? ?//debugger
?? ??? ??? ?function scrollup(){
?? ??? ??? ??? ?if(area.scrollTop>=con1.scrollHeight){
?? ??? ??? ??? ??? ?area.scrollTop=0;
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?area.scrollTop++;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?var myScroll=setInterval('scrollup()',time);
?? ??? ??? ?area.onmouseover = function(){
?? ??? ??? ??? ? clearInterval(myScroll);
?? ??? ??? ??? ?}
?? ??? ??? ?area.onmouseout = function(){
?? ??? ??? ??? ? myScroll = setInterval("scrollUp()",speed);
?? ??? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>