使用ul和li，标准下的无缝滚动图形特效__脚本特效

使用ul和li，标准下的无缝滚动

时间： 2009-10-30 11:55:29　阅读次数：2445

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>向上无缝滚动的封装的演示</title>   
<style type="text/css">   
   
</style>   
</head>   
   
<body> 
<div style=" height:50px; line-height:50px; color:#FFFFFF; background:#333333; margin-bottom:20px; padding-left:30px; font-size:16px"> 向上无缝滚动的封装的演示--<a style="color:#FFFFFF" href="www.ffasp.comhttp://www.ffasp.com">www.ffasp.com</a></div>  
<p>这个是速度为10的滚动</p>
<div id="demo" style=" overflow: hidden; width: 322px; height: 50px">
 <ul>   
        <li>111</li>   
        <li>222</li>   
        <li>333</li>   
        <li>444</li>   
        <li>555</li>   
        <li>666</li>   
        <li>777</li>   
        <li>888</li>   
    </ul>
</div>
<hr />
<p>这个是速度为50的向下滚动</p>
<div id="demo2"  style=" overflow: hidden; width: 322px; height: 50px">
 <ul>   
        <li>aaa</li>   
        <li>bbb</li>   
        <li>ccc</li>   
        <li>ddd</li>   
        <li>eee</li>   
        <li>fff</li>   
        <li>ggg</li>   
        <li>hhh</li>   
    </ul>
</div> 
<hr />
<p>这个是速度为10的向左滚动</p>
<div id="demo3" style="overflow: hidden; width: 100px; height: 25px">
 <ul>   
        <li>111</li>   
        <li>222</li>   
        <li>333</li>   
        <li>444</li>   
        <li>555</li>   
        <li>666</li>   
        <li>777</li>   
        <li>888</li>   
    </ul>
</div>
<hr />
<p>这个是速度为50的向右滚动</p>
<div id="demo4" style="overflow: hidden; width: 100px; height: 25px">
 <ul>   
        <li>aaa</li>   
        <li>bbb</li>   
        <li>ccc</li>   
        <li>ddd</li>   
        <li>eee</li>   
        <li>fff</li>   
        <li>ggg</li>   
        <li>hhh</li>   
    </ul>
</div>  
<script type="text/javascript">
function next(elem){    
        do{    
            elem=elem.nextSibling;    
        }while(elem&&elem.nodeType!=1);    
        return elem;    
    }    
    //---查找第一个子元素的函数---//    
    function first(elem){    
        elem=elem.firstChild;    
        return elem && elem.nodeType!=1?next(elem):elem;    
    }
 
 var Marquee = {
  init : function(id,toFollow,speed){
   this.speed = speed || 10;
   this.boxID = id;
   this.toFollow=toFollow;
   this.scrollBox = document.getElementById(id);
   
   
   if(this.toFollow=="top"||this.toFollow=="bottom"){
    this.appendBox=first(this.scrollBox).cloneNode(true);
    this.scrollBox.appendChild(this.appendBox);
   }else{
    var templateLeft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>"+this.scrollBox.innerHTML+"</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>"+this.scrollBox.innerHTML+"</td></tr></table>";
    this.scrollBox.innerHTML=templateLeft;
    this.appendBox=first(first(first(first(this.scrollBox))));
    
   }
   this.objs = {
    scrollBox : this.scrollBox,
    appendBox : this.appendBox,
    toFollow : this.toFollow,
    speed : this.speed,
    id : this.boxID
   };
   return this;
  },
  scrollUp : function(){
   var self = this.objs;
   self.begin = function(){
    
    if(self['toFollow']=="top"){
     self.doScr = setInterval(function(){
      if(self['appendBox'].offsetHeight<=self['scrollBox'].scrollTop){
       self['scrollBox'].scrollTop-=first(self['scrollBox']).offsetHeight;
      }else{
       self['scrollBox'].scrollTop++;
      }
     },self.speed);
    }else if(self['toFollow']=="bottom"){
    self.doScr = setInterval(function(){
     if(self['scrollBox'].scrollTop<=0){
      self['scrollBox'].scrollTop=self['appendBox'].offsetHeight;
     }else{
      self['scrollBox'].scrollTop--;
     }
    },self.speed);
   }else if(self['toFollow']=="left"){
    self.doScr = setInterval(function(){
     if(self['appendBox'].offsetWidth<=self['scrollBox'].scrollLeft){
      self['scrollBox'].scrollLeft-=self['appendBox'].offsetWidth;
     }else{
      self['scrollBox'].scrollLeft++;
     }
    },self.speed);
   }else if(self['toFollow']=="right"){
    self.doScr = setInterval(function(){
     if(self['scrollBox'].scrollLeft<=0){
      self['scrollBox'].scrollLeft=self['appendBox'].offsetWidth;
     }else{
      self['scrollBox'].scrollLeft--;
     }
     
    },self.speed);
    
   }
   }
   self.begin();
   self.scrollBox.onmouseover = function(){
    clearInterval(self.doScr);
   }
   self.scrollBox.onmouseout = function(){
    self.begin();
   }
  }
 }
 
 Marquee.init("demo","top").scrollUp();
 Marquee.init("demo2","bottom", 50).scrollUp();
 Marquee.init("demo3","left").scrollUp();
 Marquee.init("demo4","right", 50).scrollUp();
</script>  
 
</script>    
 
</body>   
</html>

提示：您可以先修改部分代码再运行