IE 上下滚动展示模仿Marquee机制

复制代码 代码如下:

  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);

  }

  }

  代码打包下载