当前位置：首页 → 问答吧 → 求助！只要打开/查看其他标签就会出错的JS！

求助！只要打开/查看其他标签就会出错的JS！

时间：2011-10-29

来源：互联网

遇到一件很蛋疼的事，用js做了个效果，一直盯着是没问题的，但只要我不看这个页面去看其他页面（打开新的标签或查看其他标签），一阵子回来就会发现这个效果出错了……
DEMO ：
http://yqjun.tk/demo/html/scrollTextDiv.html

JS部分代码
JScript code

function InfoBox(containerId) {
    this.oContainer = document.getElementById(containerId);
    this.oaInfoBox = this.oContainer.getElementsByTagName("li");
    this.autoTimer = this.changeHeightTimer = this.changeOpacityTimer = null;
}

InfoBox.prototype = {
    init: function() {
        this.autoScroll();
    },
    listenToMouse: function() {
        
    },
    autoScroll: function() {
        var self = this;
        this.autoTimer = setInterval(function() {
            self.toggle();
        }, 3000);
    },
    toggle: function() {
        var endIndex = this.oaInfoBox.length - 1;
        var lastLi = this.oaInfoBox[endIndex];
        this.oContainer.insertBefore(lastLi, this.oContainer.firstChild);

        var targetHeight = this.oaInfoBox[0].offsetHeight;
        this.oaInfoBox[0].style.height = 0 + "px";
        this.oaInfoBox[0].style.opacity = "0";
        this.oaInfoBox[0].style.filter = "alpha(opacity=0)";

        this.changeHeight(targetHeight);
    },
    changeHeight: function(targetHeight){
        var self = this;
        var speed = newHeight = 0;
        clearInterval(self.changeHeightTimer);
        this.changeHeightTimer = setInterval(function() {
            speed = (targetHeight - newHeight) / 8;
            newHeight += speed;
            self.oaInfoBox[0].style.height = newHeight + "px";    
            //test begin
            var span = document.getElementById("test");
            span.innerHTML = "speed: " + speed + " / targetHeight : " + targetHeight +" / height: " + newHeight;
            //test end
            if(speed <= 0.1) {
                self.oaInfoBox[0].style.height = targetHeight + "px";
                self.showDiv();
                clearInterval(self.changeHeightTimer);
            }
        }, 30);
    },
    showDiv: function() {
        var self = this;
        var argOpacity = 0;
        clearInterval(this.changeOpacityTimer);
        this.changeOpacityTimer = setInterval(function(){
            argOpacity += 5;
            self.oaInfoBox[0].style.opacity = argOpacity / 100;
            self.oaInfoBox[0].style.filter = "alpha(opacity=" + argOpacity +")";
            if(argOpacity >= 100) {
                clearInterval(self.changeOpacityTimer);
            }
        }, 30);
    }
}