js模拟marquee效果收集

 文字向上滚动:

< head >
< title > 效果演示 </ title >
</ head >
< body >
< h3 > 建立图层 </ h3 >
< div id = " sampleDiv "  style = " font-size: 12px; line-height: 20px; " >
当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。
</ div >
< h3 > 然后调用脚本文件 </ h3 >
< script type = " text/javascript " >
function  scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover)  ... {
    this.id              = _id;
    this.width           = _width;
    this.height          = _height;
    this.bgColor         = _bgColor;
    this.direction       = _direction;
    this.delay           = _delay;
    this.pauseTime       = _pauseTime;
    this.size            = _size;
    this.object          = null;
    this.isMove          = true;
    
    if((this.id == "") || (this.id == null)) ...{
        alert("必须输入对象的 ID 才能创建滚动区域！");
        this.isMove = false;
        return false;
    }
    
    if(document.getElementById(this.id)) ...{
        this.object = document.getElementById(this.id);
    } else ...{
        window.alert("滚动区域创建失败！ 请确认 " + this.id + " 是否拼写错误。");
        this.isMove = false;
        return false;
    }
}
scrollingAD.prototype.checkNumber  =   function (_attribute, defaultValue)  ... {    
    if(isNaN(_attribute)) ...{
        return defaultValue;
    } else ...{
        return ((typeof(parseInt(_attribute)) == "number") ? parseInt(_attribute) : defaultValue);
    }
}
scrollingAD.prototype.move  =   function ()  ... {
    if(this.isMove == false) return false;
    
    var defaultWidth           = 200;
    var defaultHeight          = 50;
    var defaultDelay           = 20;
    var defaultPauseTime       = 2000;
    var defaultIsHover         = true;
    var defaultBgColor         = "transparent";
    var defaultDirection       = "up";
    
    this.width          = this.checkNumber(this.width, defaultWidth);
    this.height         = this.checkNumber(this.height, defaultHeight);
    this.delay          = this.checkNumber(this.delay, defaultDelay);
    this.pauseTime      = this.checkNumber(this.pauseTime, defaultPauseTime);
    this.isHover        = (typeof(this.isHover) == "boolean") ? this.isHover : defaultIsHover;
    
    if(this.direction == "left") ...{
        this.size       = this.checkNumber(this.size, this.width);
    } else ...{
        this.size       = this.checkNumber(this.size, this.height);
    }
    
    if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) ...{
        this.bgColor = defaultBgColor;
    } else ...{
        this.bgColor = this.bgColor;
    }
    
    if((this.direction == null) || (typeof(this.direction) == undefined)) ...{
        this.direction = defaultDirection;    
    } else ...{
        this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection;
    }
    
    // 创建滚动区域；
    with(this.object) ...{
        style.display         = "block";
        style.width           = this.width + "px";
        style.height          = this.height + "px";
        style.overflow        = "hidden";
        style.backgroundColor = this.bgColor;
    }
    
    if(this.direction == "up") ...{
        this.object.innerHTML = "<div id="" + this.id + "_mirror">" + this.object.innerHTML + "</div>" + "<div>" + this.object.innerHTML + "</div><input type="hidden" value="1" id="" + this.id + "_isHover" />";
    } else ...{
        this.object.innerHTML = "<span id="" + this.id + "_mirror">" + this.object.innerHTML + "</span>" + "<span>" + this.object.innerHTML + "</span><input type="hidden" value="1" id="" + this.id + "_isHover" />";
    }
        
    if(document.getElementById(this.id)) ...{
        var evalString;
        if(this.direction == "up") ...{
            evalString = "scrollToUp("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";
        } else ...{
            evalString = "scrollToLeft("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";
        }
        eval(evalString);
        
    } else ...{
        return false;
    }
    
    function pixelToNum(_string)    ...{
    //该函数用于去掉数值后面的px，并将之转化为数字。
        if(_string.slice(_string.length - 2) == "px") ...{
            return parseInt(_string.slice(0, (_string.length - 2)));
        } else  ...{
            return _string;
        }
    }
    
    function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) ...{
        var obj = document.getElementById(_id);
        var mirror = document.getElementById(_id + "_mirror");    
        
        if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) ...{
            var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";
        
            if(_isHover) ...{
                mirror.onmouseover = function() ...{document.getElementById(_id + "_isHover").value = 0;}
                mirror.onmouseout  = function() ...{document.getElementById(_id + "_isHover").value = 1;}
                var step = parseInt(document.getElementById(_id + "_isHover").value);
                mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px";    
                eval("var " + evalString);
            } else ...{                
                mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px";    
                eval("var " + evalString);
            }
        } else ...{
            if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) ...{
                _s += 1;
                window.setTimeout(function() ...{scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);
            } else ...{
                mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";;
                window.setTimeout(function() ...{scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);
            }
        }
        
    }
    function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) ...{
        var obj = document.getElementById(_id);
        var mirror = document.getElementById(_id + "_mirror");    
        
        if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) ...{
            var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";
        
            if(_isHover) ...{
                mirror.onmouseover = function() ...{document.getElementById(_id + "_isHover").value = 0;}
                mirror.onmouseout  = function() ...{document.getElementById(_id + "_isHover").value = 1;}
                var step = parseInt(document.getElementById(_id + "_isHover").value);
                mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px";    
                eval("var " + evalString);
            } else ...{                
                mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px";    
                eval("var " + evalString);
            }
        } else ...{
            if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) ...{
                _s += 1;
                window.setTimeout(function() ...{scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);
            } else ...{
                mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";;
                window.setTimeout(function() ...{scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);
            }
        }
    }
}
</ script >
< h3 > 最后建立滚动区域 </ h3 >
< script type = " text/javascript " >
//  <![CDATA[
var  sampleDiv  =   new  scrollingAD( " sampleDiv " );
sampleDiv.width  =   200 ;
sampleDiv.height  =   20 ;
sampleDiv.pauseTime  =   0 ;
sampleDiv.direction  =   " right " ;
sampleDiv.bgColor  =   " yellow " ;
sampleDiv.move();
//  ]]>
</ script >
< p > 如果脚本报错，可能是因为我的网站速度连接太慢的原因，只要刷新一下页面就行了。 </ p >
</ body >
</ html >

图片向上滚动

< div id = demo style = overflow:hidden;height: 150 ;width: 150 ; 
background:# 214984 ;color:#ffffff >  
< div id = demo1 >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  </ div >  
  < div id = demo2 ></ div >  
  </ div >  
    < script >  
   var speed = 30  
   demo2.innerHTML = demo1.innerHTML  // 克隆demo1为demo2 
    function  Marquee(){ 
// 当滚动至demo1与demo2交界时 
if (demo2.offsetTop - demo.scrollTop <= 0 )   
demo.scrollTop -= demo1.offsetHeight  // demo跳到最顶端 
else { 
demo.scrollTop ++  
   } 
   } 
   var MyMar = setInterval(Marquee,speed) // 设置定时器 
// 鼠标移上时清除定时器达到滚动停止的目的 
   demo.onmouseover = function () {clearInterval(MyMar)} 
// 鼠标移开时重设定时器 
   demo.onmouseout = function (){MyMar = setInterval(Marquee,speed)} 
</ script >  

图片乡下滚动

   < div id = demo style = overflow:hidden;height: 150 ;width: 150 ; 
background:# 214984 ;color:#ffffff >  
< div id = demo1 >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
</ div >  
< div id = demo2 ></ div >  
</ div >  
     < script >  
    var speed = 30  
    demo2.innerHTML = demo1.innerHTML 
    demo.scrollTop = demo.scrollHeight 
     function  Marquee(){ 
     if (demo1.offsetTop - demo.scrollTop >= 0 ) 
    demo.scrollTop += demo2.offsetHeight 
     else { 
    demo.scrollTop --  
    } 
    } 
    var MyMar = setInterval(Marquee,speed) 
    demo.onmouseover = function () {clearInterval(MyMar)} 
    demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)} 
   </ script >  

   < div id = demo style = overflow:hidden;height: 150 ;width: 150 ; 
background:# 214984 ;color:#ffffff >  
< div id = demo1 >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
  < img src = " attachments/month_0707/220077293150.gif " >  
</ div >  
< div id = demo2 ></ div >  
</ div >  
     < script >  
    var speed = 30  
    demo2.innerHTML = demo1.innerHTML 
    demo.scrollTop = demo.scrollHeight 
     function  Marquee(){ 
     if (demo1.offsetTop - demo.scrollTop >= 0 ) 
    demo.scrollTop += demo2.offsetHeight 
     else { 
    demo.scrollTop --  
    } 
    } 
    var MyMar = setInterval(Marquee,speed) 
    demo.onmouseover = function () {clearInterval(MyMar)} 
    demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)} 
   </ script >  

向左滚动，带控制条

< script >  
var speed = 30  
demo2.innerHTML = demo1.innerHTML 
function  Marquee(){ 
if (demo2.offsetWidth - demo.scrollLeft <= 0 ) 
demo.scrollLeft -= demo1.offsetWidth 
else { 
demo.scrollLeft ++  
} 
} 
var MyMar = setInterval(Marquee,speed) 
demo.onmouseover = function () {clearInterval(MyMar)} 
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)} 
</ script >  

下面是解释：

offsetWidth是指物体可见宽度 
scrollLeft是指滚动滑块在滚动条上的位置 
< ! -- 对于此例,网页中一般会有三个容器,此处为demo,demo1和demo2;其中demo1和demo2均在demo中 
demo的overflow属性一般为hidden,我在这里用auto是为了方便你查看scrollLeft的状态, 
另外为方便你理解scrollLeft和offsetWidth,我还在后面加了一个viewstatus函数,鼠标经过容器时会看到相关参数值 
//-->  
< div id = demo style = " width:200;overflow:auto " >  
< table >< tr >  
< td id = demo1 >  
< img src = ' a.gif' width=100><img src='b.gif' width=100></td> 
< td id = demo2 ></ td >  
</ tr ></ table >  
</ div >  

< script >  
var speed = 30   // 定义速度,实指下面滚动函数的执行间隔,值越小滚动越快 
demo2.innerHTML = demo1.innerHTML  // 将demo1中的内容复制到demo2 
function  Marquee(){  // 开始定义滚动函数 
if (demo2.offsetWidth - demo.scrollLeft <= 0 ) 
demo.scrollLeft -= demo1.offsetWidth  // 如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度 
else { 
demo.scrollLeft ++   // 否则,滑动块向右滚动(图片向左滚) 
} 
} // 滚动函数定义完 
var MyMar = setInterval(Marquee,speed)  // 设置定时器,使滚动函数每30毫秒运行一次 
demo.onmouseover = function () {clearInterval(MyMar);viewstatus();} // 鼠标经过时,清除定时器,停止执行滚动函数,弹出信息; 
demo.onmouseout = function () {MyMar = setInterval(Marquee,speed)} //  鼠标离开后,继续滚动 

function  viewstatus(){ // 这是我加的函数,很简单,不注释了 
mess = " demo.scrollLeft: " + demo.scrollLeft + " demo1.offsetWidth: " + demo1.offsetWidth
+ " demo2.offsetWidth: " + demo2.offsetWidth; 
alert(mess); 
} 
</ script >