当前位置: 首页 > 图文教程 > 网络编程 > Javascript > IE 上下滚动展示模仿Marquee机制

Javascript
学习ExtJS(二) Button常用方法
学习ExtJS TextField常用方法
学习ExtJS Panel常用方法
学习ExtJS Window常用方法
学习ExtJS 访问容器对象
学习ExtJS border布局
学习ExtJS fit布局使用说明
学习ExtJS form布局
学习ExtJS accordion布局
学习ExtJS table布局
Javascript 日期处理之时区问题
JavaScript 监听textarea中按键事件
Javascript isArray 数组类型检测函数
JavaScript delete 属性的使用
防止动态加载JavaScript引起的内存泄漏问题
javascript Range对象跨浏览器常用操作
JavaScript 另类遍历数组实现代码
网页制作ajax特效实例
javascript修复浏览器中头痛问题
2008年关注基于JavaScript开发的产品

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 197 ::
收藏到网摘: n/a

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

代码打包下载