sync.transitionpane.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

     * @type Number
     */
    sleepInterval: 10,
    
    $abstract: { },

    $construct: function(transitionPane) {
        this.transitionPane = transitionPane;
    }
});

Extras.Sync.TransitionPane.BlindTransition = Core.extend(Extras.Sync.TransitionPane.Transition, {

    runTime: 700,
    _maskDiv: null,
    _stepCount: 14,
    _swapStep: null,
    _reverse: false,
    
    complete: function(abort) {
        this._maskDiv.parentNode.removeChild(this._maskDiv);
    },
    
    init: function() {
        this._swapStep = Math.floor(this._stepCount) / 2 + 1;
        this._reverse = this.transitionPane.type === Extras.TransitionPane.TYPE_BLIND_BLACK_OUT;

        this._maskDiv = document.createElement("div");
        this._maskDiv.style.cssText = "position:absolute;width:100%;height:100%;z-index:32767;";
        this.transitionPane.contentDiv.appendChild(this._maskDiv);
    },

    step: function(progress) {
        var currentStep = Math.ceil(progress * this._stepCount);
        if (currentStep === 0) {
            currentStep = 1;
        }
        if (currentStep === this._renderedStep) {
            // No need to update, already current.
            return;
        }
        var url = this.transitionPane.client.getResourceUrl("Extras", 
                "image/transitionpane/blindblack/Frame" + currentStep + ".gif");
        this._maskDiv.style.backgroundImage = "url(" + url + ")";
        
        if (currentStep < this._swapStep) {
            if (this.transitionPane.oldChildDiv) {
                if (this._reverse) {
                    this.transitionPane.oldChildDiv.style.top = currentStep + "px";
                } else {
                    this.transitionPane.oldChildDiv.style.top = (0 - currentStep) + "px";
                }
            }
        } else {
            if (this._renderedStep < this._swapStep) {
                // blind is crossing horizontal, swap content.
                this.transitionPane.showContent();
                this.transitionPane.removeOldContent();
            }
            if (this.transitionPane.childDiv) {
                if (this._reverse) {
                    this.transitionPane.childDiv.style.top = (currentStep - this._stepCount) + "px";
                } else {
                    this.transitionPane.childDiv.style.top = (this._stepCount - currentStep) + "px";
                }
            }
        }

        this._renderedStep = currentStep;
    }    
});

Extras.Sync.TransitionPane.CameraPanTransition = Core.extend(
        Extras.Sync.TransitionPane.Transition, {
        
    _newChildOnScreen: false,
    
    _travel: null,

    complete: function(abort) {
        if (this.transitionPane.childDiv) {
            this.transitionPane.childDiv.style.zIndex = 0;
            this.transitionPane.childDiv.style.top = "0px";
            this.transitionPane.childDiv.style.left = "0px";
        }
    },
    
    init: function() {
        var bounds = new Core.Web.Measure.Bounds(this.transitionPane.contentDiv);
        this._travel = (this.transitionPane.type == Extras.TransitionPane.TYPE_CAMERA_PAN_DOWN || 
                this.transitionPane.type == Extras.TransitionPane.TYPE_CAMERA_PAN_UP) ? bounds.height : bounds.width;
        if (this.transitionPane.oldChildDiv) {
            this.transitionPane.oldChildDiv.style.zIndex = 1;
        }
    },
    
    step: function(progress) {
        switch (this.transitionPane.type) {
        case Extras.TransitionPane.TYPE_CAMERA_PAN_DOWN:
            if (this.transitionPane.childDiv) {
                this.transitionPane.childDiv.style.top = ((1 - progress) * this._travel) + "px";
            }
            if (this.transitionPane.oldChildDiv) {
                this.transitionPane.oldChildDiv.style.top = (0 - (progress * this._travel)) + "px";
            }
            break;
        case Extras.TransitionPane.TYPE_CAMERA_PAN_UP:
            if (this.transitionPane.childDiv) {
                this.transitionPane.childDiv.style.top = (0 - ((1 - progress) * this._travel)) + "px";
            }
            if (this.transitionPane.oldChildDiv) {
                this.transitionPane.oldChildDiv.style.top = (progress * this._travel) + "px";
            }
            break;
        case Extras.TransitionPane.TYPE_CAMERA_PAN_RIGHT:
            if (this.transitionPane.childDiv) {
                this.transitionPane.childDiv.style.left = ((1 - progress) * this._travel) + "px";
            }
            if (this.transitionPane.oldChildDiv) {
                this.transitionPane.oldChildDiv.style.left = (0 - (progress * this._travel)) + "px";
            }
            break;
        default:
            if (this.transitionPane.childDiv) {
                this.transitionPane.childDiv.style.left = (0 - ((1 - progress) * this._travel)) + "px";
            }
            if (this.transitionPane.oldChildDiv) {
                this.transitionPane.oldChildDiv.style.left = (progress * this._travel) + "px";
            }
            break;
        }
        if (!this._newChildOnScreen && this.transitionPane.childDiv) {
            this.transitionPane.showContent();
            this.transitionPane.childDiv.style.zIndex = 2;
            this._newChildOnScreen = true;
        }
    }
});

Extras.Sync.TransitionPane.FadeOpacityTransition = Core.extend(Extras.Sync.TransitionPane.Transition, {
    
    runTime: 1000,
    
    complete: function(abort) {
        if (this.transitionPane.childDiv) {
            this.transitionPane.childDiv.style.zIndex = 0;
            if (Core.Web.Env.PROPRIETARY_IE_OPACITY_FILTER_REQUIRED) {
                this.transitionPane.childDiv.style.filter = "";
            } else {
                this.transitionPane.childDiv.style.opacity = 1;
            }
        }
    },
    
    init: function() {
        if (this.transitionPane.childDiv) {
            if (Core.Web.Env.PROPRIETARY_IE_OPACITY_FILTER_REQUIRED) {
                this.transitionPane.childDiv.style.filter = "alpha(opacity=0)";
            } else {
                this.transitionPane.childDiv.style.opacity = 0;
            }
        }
        this.transitionPane.showContent();
    },
    
    step: function(progress) {
        var percent;
        if (this.transitionPane.childDiv) {
            if (Core.Web.Env.PROPRIETARY_IE_OPACITY_FILTER_REQUIRED) {
                percent = Math.floor(progress * 100);
                this.transitionPane.childDiv.style.filter = "alpha(opacity=" + percent + ")";
            } else {
                this.transitionPane.childDiv.style.opacity = progress;
            }
        } else if (this.transitionPane.oldChildDiv) {
            if (Core.Web.Env.PROPRIETARY_IE_OPACITY_FILTER_REQUIRED) {
                percent = Math.floor((1 - progress) * 100);
                this.transitionPane.oldChildDiv.style.filter = "alpha(opacity=" + percent + ")";
            } else {
                this.transitionPane.oldChildDiv.style.opacity = 1 - progress;
            }
        }
    }
});

Extras.Sync.TransitionPane.FadeOpacityColorTransition = Core.extend(Extras.Sync.TransitionPane.Transition, {

    runTime: 1000,
    _maskDiv: null,
    _swapped: false,
    
    complete: function(abort) {
        this._maskDiv.parentNode.removeChild(this._maskDiv);
    },
    
    init: function() {
        this._maskDiv = document.createElement("div");
        this._maskDiv.style.cssText = "position:absolute;width:100%;height:100%;z-index:32767;";
        if (Core.Web.Env.PROPRIETARY_IE_OPACITY_FILTER_REQUIRED) {
            this._maskDiv.style.filter = "alpha(opacity=0)";
        } else {
            this._maskDiv.style.opacity = 0;
        }
        if (this.transitionPane.type === Extras.TransitionPane.TYPE_FADE_TO_WHITE) {
            this._maskDiv.style.backgroundColor = "#ffffff";
        } else {
            this._maskDiv.style.backgroundColor = "#000000";
        }
        this.transitionPane.contentDiv.appendChild(this._maskDiv);
    },

    step: function(progress) {
        var opacity = 1 - Math.abs(progress * 2 - 1);
        if (progress > 0.5 && !this._swapped) {
            this.transitionPane.showContent();
            this.transitionPane.removeOldContent();
            this._swapped = true;
        }
        if (Core.Web.Env.PROPRIETARY_IE_OPACITY_FILTER_REQUIRED) {
            var percent = Math.floor(opacity * 100);
            this._maskDiv.style.filter = "alpha(opacity=" + percent + ")";
        } else {
            this._maskDiv.style.opacity = opacity;
        }
    }
});