IE 上下滚动展示模仿Marquee机制_Javascript教程-查字典教程网
IE 上下滚动展示模仿Marquee机制
IE 上下滚动展示模仿Marquee机制
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:varSTARTINGOPACITY=40;//设置不透明度varSTARTINP=70;//设置透明度varSCROLL...

复制代码 代码如下:

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 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教程学习
    编程开发子分类