js无缝向上滚动代码-CSDN博客

 
         <!DOCTYPE HTML> 
        
         < 
         html  
         lang 
         = 
         "en-US" 
         > 
        
         < 
         head 
         > 
        
         < 
         meta  
         charset 
         = 
         "UTF-8" 
         > 
        
         < 
         title 
         >无缝滚动——上下</ 
         title 
         > 
        
         < 
         style  
         type 
         = 
         "text/css" 
         > 
        
         *{margin:0;padding:0;} 
        
         li{list-style:none;} 
        
         img{border:0;} 
        
         #scroll{width:178px;margin:50px auto;position:relative;} 
        
         .btn{display:block;width:27px;height:27px;margin-left:auto;margin-right:auto;cursor:pointer;} 
        
         .up{background:url(images/up.gif);border:solid 1px red;} 
        
         .down{background:url(images/down.gif);} 
        
         .content{margin:10px 0;height:240px;overflow:hidden;position:relative;border:solid 1px balck;} 
        
         .content ul{position:absolute;top:0;left:0;} 
        
         .content li{height:30px;} 
        
         </ 
         style 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         div  
         id 
         = 
         "scroll" 
         > 
        
         < 
         div  
         class 
         = 
         "content" 
         > 
        
         < 
         ul 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         < 
         li 
         >1</ 
         li 
         > 
        
         </ 
         ul 
         > 
        
         </ 
         div 
         > 
        
         </ 
         div 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         > 
        
         < 
         script  
         type 
         = 
         "text/javascript" 
         > 
        
         window.onload = function(){ 
        
         var oDiv = document.getElementById('scroll'); 
        
         var btnUp = document.getElementById('up'); 
        
         var btnDown = document.getElementById('down'); 
        
         var oUl = oDiv.getElementsByTagName('ul')[0]; 
        
         var timer = null; 
        
         var speed = -1; 
        
         oUl.innerHTML += oUl.innerHTML; 
        
         setTimeout(move,1500); 
        
         btnUp.onclick = function(){ 
        
         clearInterval(timer); 
        
         speed = -1; 
        
         move(); 
        
         }; 
        
         btnDown.onclick = function(){ 
        
         clearInterval(timer); 
        
         speed = 1; 
        
         move(); 
        
         }; 
        
         oUl.onmouseover = function(){ 
        
         clearInterval(timer); 
        
         }; 
        
         oUl.onmouseout = function(){ 
        
         move(); 
        
         }; 
        
         function move(){ 
        
         timer = setInterval(function(){ 
        
         oUl.style.top = oUl.offsetTop + speed + 'px'; 
        
         if(oUl.offsetTop <= - oUl.offsetHeight / 2){ 
        
         oUl.style.top = '0'; 
        
         }else if(oUl.offsetTop >= 0){ 
        
         oUl.style.top = - oUl.offsetHeight / 2 + 'px'; 
        
         }; 
        
         },30); 
        
         }; 
        
         }; 
        
         </ 
         script 
         >

 
   本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1864804