`
入云涛
  • 浏览: 153781 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

IE 展示 上下滚动 实现Marquee机制

IE 
阅读更多
最近要做一个大屏幕展示上下滚动的列表,而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);
  }
}



具体见附件
  • 大小: 179.6 KB
  • 大小: 177.9 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics