Posted in Javascript onDecember 20, 2009
var STARTINGOPACITY = 40; //设置不透明度 var STARTINP = 70;//设置透明度 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"); //设置高度 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设置为最下面 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设置为最下面 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); } }
代码打包下载
IE 上下滚动展示模仿Marquee机制
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@