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

Javascript
js实现图片显示局部,鼠标经过显示全部的效果
Javascript 更新 JavaScript 数组的 uniq 方法
JavaScript 数组的 uniq 方法
js菜单代码js菜单特效代码
用dom+xhtml+css制作的一个相册效果代码打包下载
Javascript优化技巧(文件瘦身篇)
ImageFlow可鼠标控制图片滚动
js实现form自动完成功能
js 生成随机汉字的问题
一个js封装的不错的选项卡效果代码
setInterval 和 setTimeout会产生内存溢出
setAttribute 与 class冲突解决
window.addeventjs事件驱动函数集合addEvent等
javascript replace方法与正则表达式
js 替换
javascript下利用for( in )语句 获得所有事件名称的代码
javascript下用for( in )语句 获得所有style 内容的脚本代码
javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
javascript创建数组的最简代码
中国象棋js代码,仅演示,未能真下

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 407 ::
收藏到网摘: 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);
}
}

代码打包下载