IE 上下滚动展示模仿Marquee机制 |
本文标签:IE,上下滚动 复制代码 代码如下: 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); } } 代码打包下载 |