IE 上下滾動展示模仿Marquee機制

更新時間：2009年12月20日 02:11:13 作者：

最近要做一個大屏幕展示上下滾動的列表，而IE自帶的Marquee，無法滿足需要，隨自己寫了一個滾動機制，代碼在附件中

var STARTINGOPACITY = 40;    //設(shè)置不透明度 
var STARTINP = 70;//設(shè)置透明度 
var SCROLLSTUP = 1;//滾動速度，1為一個像素 
var SCROLLSYY = 100;//滾動時間請求 
var reqflg = false; 

// handles manual scrolling of the content // 
function scrollContent(pardiv,id,sub) { 
var div = document.getElementById("textslider"); 
var divsub = document.getElementById(sub); 
var divpar = document.getElementById(pardiv); 

clearInterval(div.timer); 
div.style.opacity = STARTINGOPACITY * .01; 
div.style.filter = 'alpha(opacity=' + STARTINP + ')'; 
var div2 = document.getElementById("textslider2"); 
if(div2!=null){ 
    clearInterval(div2.timer); 
div2.style.opacity = STARTINGOPACITY * .01; 
div2.style.filter = 'alpha(opacity=' + STARTINP + ')'; 
} 

var tem = div.innerHTML;//第一個頁 
tem1 = "<div class=\"slidercontent1\" id=\"textslider2\">"+tem+"</div>";//第二個頁 

var objheight = divpar.offsetHeight; 
var divheight = div.offsetHeight; 

//判斷是否需要滾屏，如果不需要就不滾動 
if(objheight<divheight){ 
    if(!reqflg){ 
        divpar.innerHTML += tem1; 
        reqflg = true; 
        div = document.getElementById("textslider"); 
        div2 = document.getElementById("textslider2"); 
        //設(shè)置高度 
        div2.style.top = divheight-1+ "px"; 
    } 
    div.timer = setTimeout( function() { scrollAnimate(div,div2) }, SCROLLSYY); 
} 
} 
function scrollAnimate(div,div2) { 
//獲取兩個子div的top值 
var divtop = div.offsetTop; 
//alert(divtop); 
if(divtop==0){ 
    div.style.top = "0px"; 
divtop = 0; 
} 
var div2top = div2.offsetTop; 
if(div2top==0){ 
    div2top = 0; 
div2.style.top = "0px"; 
} 
if(divtop<div2top){ 
    //1號在上面 2號在下面 
div.style.top = divtop - SCROLLSTUP+'px'; 
    div2.style.top = div2top - SCROLLSTUP+'px'; 
    //alert("div.style.top:"+div.style.top+"---div2.style.top:"+div2.style.top+":height:"+div.offsetHeight); 
    //判斷是否交換位置,如果高度位置等于top那么交換 
    if(div.offsetTop==-div.offsetHeight){ 
     //將top設(shè)置為最下面 
div.style.top = div2.offsetHeight; 
    } 
}else{ 
    //2號在上面 1號在下面 
    div2.style.top = div2top - SCROLLSTUP+'px'; 
    div.style.top = divtop - SCROLLSTUP+'px'; 
    //判斷是否交換位置,如果高度位置等于top那么交換 
    if(div2.offsetTop==-div2.offsetHeight){ 
     //將top設(shè)置為最下面 
div2.style.top = div.offsetHeight; 
    } 
} 
div.timer = setTimeout( function() { scrollAnimate(div,div2) }, SCROLLSYY); 
} 

// cancel the scrolling on mouseout // 
function cancelScroll(pardiv,id,sub) { 
var div = document.getElementById(id); 
div.style.opacity = 1; 
div.style.filter = 'alpha(opacity=100)'; 
clearTimeout(div.timer); 

var div2 = document.getElementById("textslider2"); 
if(div2!=null){ 
     div2.style.opacity = 1; 
     div2.style.filter = 'alpha(opacity=100)'; 
     clearTimeout(div2.timer); 
} 
}