复制代码 代码如下: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); } }代码打包下载

　　推荐阅读

　　JavaScript 序列化对象实现代码

作者发的是一张图，大家可以放大看。前些天说过关于JavaScript的Literal Syntax问题，觉得挺有意思的，于是又研究了一下，能不能把对象再转化为Literal形式呢？就像我们平时说的序列化和反序列化啥的。当然可以了，>>>详细阅读

本文标题：IE 上下滚动展示模仿Marquee机制

地址：http://www.17bianji.com/kaifa2/JS/27448.html

 1/2    1