JS : 连续滚动

网站广告比较常用的js滚动,下面这段代码来源于百度贴吧,自己改一改...

主要方法如下:

//JS : 连续滚动
//参数: obj:物件ID[, isVertical:是否垂直方向[, offset:偏移量[, speed:上升速度[, delay:推迟时间]]]]
function startMarquee(obj, isVertical, offset, speed, delay) { 
    if(!chkObject(obj)) return;
    var p = false;
    var t;
    var o = document.createElement('div'), t = document.getElementById(obj);
    var i = t.innerHTML;
    isVertical = chkObject(isVertical) ? isVertical : true;
    speed = chkObject(speed) ? speed : 20;
    delay = chkObject(delay) ? delay : 1500;
    o.innerHTML = i;
    t.innerHTML = ''; 
    t.appendChild(o);  
    if(isVertical) { 
        offset = chkObject(offset) ? offset : parseInt(t.style.lineHeight);
        offset = chkObject(offset) ? offset : parseInt(t.style.height);
        if(o.offsetHeight <= t.offsetHeight) return;
        o.style.marginTop = 0;
        o.innerHTML += '<div>' + i + '</div>';
    } else {
        offset = chkObject(offset) ? offset : parseInt(t.style.width);
        if(o.offsetWidth <= t.offsetWidth) return;
        o.style.marginLeft = 0;
        o.style.whiteSpace = 'nowrap';
        o.style.overFlow = 'hidden';
        o.innerHTML += i;
    }
    t = null;
    i = null; 
    o.onmouseover = function() {p = true;}
    o.onmouseout = function() {p = false;}
    
    function chkObject(obj) {
        if(typeof(obj) == 'undefined' || (typeof(obj) == 'Number' && obj == 0))
            return false;
        return true;
    }

    function start(){
        t = setInterval(scrolling, speed);
        if(!isVertical) {
            if(!p) o.style.marginLeft = parseInt(o.style.marginLeft) - 1 + 'px';
        } else {
            if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + 'px';
        }
    }

    function scrolling(){
        if(!isVertical && parseInt(o.offsetLeft) % offset != 0) { 
            o.style.marginLeft = parseInt(o.style.marginLeft) - 1 + 'px';
            if(Math.abs(parseInt(o.style.marginLeft)) >= o.scrollWidth / 2) o.style.marginLeft = 0;
        } else if(isVertical && parseInt(o.style.marginTop) % offset != 0) {
            o.style.marginTop = parseInt(o.style.marginTop) - 1 + 'px';
            if(Math.abs(parseInt(o.style.marginTop)) >= o.scrollHeight / 2) o.style.marginTop = 0; 
        } else { 
            clearInterval(t);
            setTimeout(start, delay);
        }
    }
    setTimeout(start, delay);
}

example:

<div id="scrolltext" style="height:54px; overflow:hidden;"> 
一百样可能(粤)<br />
黎明<br />
作词:周耀辉 作曲:刘诺生<br />
内内外外 从来没有过记载<br />
爱到要超出一般<br />
人人认识的爱<br />
自自在在 能同时向你说爱<br />
却分开 没有不应该<br />
在现在 活在后现代 我叫你<br />
盖上你眼盖 将身心<br />
超出能承受的感慨<br />
越另外 越是后现代<br />
要去到最远和最外<br />
让意识张开<br />
不知怎么抑制 要超过一切<br />
记得爱得美丽 别理会惯例<br />
甚至令到自己<br />
要超过一切的世人 然后<br />
Say You Say You Love Me<br />
超出亲与近<br />
Say You Say You Love Me<br />
超出真与实<br />
Say You Say You Love Me<br />
即刻的爱人<br />
Say You Say You Love Me<br />
超出一百样可能<br />
在现在 活在后现代 我叫你<br />
盖上你眼盖 将身心<br />
超出能承受的感慨<br />
越另外 越是后现代<br />
要去到最远和最外<br />
让意识张开<br />
不知怎么抑制 要超过一切<br />
记得爱得美丽 别理会惯例<br />
甚至令到自己<br />
要超过一切的世人 然后<br />
Say You Say You Love Me<br />
超出亲与近<br />
Say You Say You Love Me<br />
超出真与实<br />
Say You Say You Love Me<br />
即刻的爱人<br />
Say You Say You Love Me<br />
超出一百样可能<br />
不知怎么抑制 要超过一切<br />
记得爱得美丽 别理会惯例<br />
甚至令到自己<br />
要超过一切的世人 然后<br />
Say You Say You Love Me<br />
超出亲与近<br />
Say You Say You Love Me<br />
超出真与实<br />
Say You Say You Love Me<br />
即刻的爱人<br />
Say You Say You Love Me<br />
超出一百样<br />
Say You Say You Love Me<br />
超出亲与近<br />
Say You Say You Love Me<br />
超出真与实<br />
Say You Say You Love Me<br />
即刻的爱人<br />
Say You Say You Love Me<br />
超出一百样可能<br />

</div>

关键在于id,定高height,还有就是把overflow的属性改为hidden.那下面就有戏了....

调用方法:

startMarquee('scrolltext', true, 18);

本方法还有个垂直向上滚动的调用方法...  
有兴趣的博友自己去研究吧....