effects.lib.js

asp的bbs程序

/*
  By Hangring
  #2007.12.27#
  ---
  use list:
  > global.lib.js
  > node.lib.js
  > events.lib.js
  > css.lib.js
  > color.lib.js
  > popup.lib.js
  ---
  特效
*/

$Defined('Effects');
var Effects = {};

// 渐变
Effects.Trans = 
function (container /* :HTMLElement */, list /* :Array */, time_min /* :Number */, time_max /* :Number */) {
    if (! oNode.IsNode(container)) return;
    if (typeof list != 'object' || !list.length) return;

    var _container = document.createElement('div');
    container.appendChild(_container);
    with (_container.style) {
        position = 'relative';
        left = 0;
        top = 0;
        width = '100%';
        height = '100%';
    }

    for (var i = 0; i < list.length; i++) {
        var c = document.createElement('div');
        _container.appendChild(c);
        with (c.style) {
            position = 'absolute';
            left = 0;
            top = 0;
            width = '100%';
            height = '100%';
            textAlign = 'center';
            opacity = 0;
            filter = 'alpha(opacity=0)';
        }
        c.innerHTML = list[i];
        list[i] = c;
    }

    var interval;
    var current = 0;
    var previous = 0;
    time_min = time_min || 100;
    time_max = time_max || 1000;
    function run () {
        if (CSS.GetAlpha(list[previous]) >= 100) {
            CSS.SetAlpha(list[previous], 0);
        }

        var cur = list[current];
        var alpha = CSS.GetAlpha(cur) + 10;
        CSS.SetAlpha(cur, alpha);

        var pause = false;
        if (alpha >= 100) {
            pause = true;
            previous = current;
            current = (current + 1) % list.length;
        }

        interval = setTimeout(run, pause ? time_max : time_min);
    };
    run();
};

// 颜色渐变
Effects.TransColor = 
function (container /* :HTMLElement */, colors /* :Array */, time /* :Number */) {
    if (! oNode.IsNode(container)) return;

    var len = colors.length;
    for (var i = 0; i < len; i++) {
        colors[i] = Color.GetNumFromColor(colors[i]);
    }

    var interval;
    var current = 0;
    var cur_color = colors[0];
    var step = 100;
    //container.style.color = Color.GetColorFromNum(cur_color);
    function run () {
        if (cur_color + step > colors[(current + 1) % len]) {
            current = (current + 1) % len;
            cur_color = colors[current];
        }
        else {
            cur_color += step;
        }
        container.style.color = Color.GetColorFromNum(cur_color);

        interval = setTimeout(run, time);
    };
    run();
}

// 滚动
Effects.Roll = function () {
};

// 切换
Effects.Switch = 
function (
    list /* [['node1_button':String|HTMLElement , 'node2_content':String|HTMLElement]:Array, ['node3_button':String|HTMLElement, 'node4_content':String|HTMLElement]:Array, ...]:Array */,
    butFocusCss /* 聚焦样式:String */,
    butBlurCss /* 失焦样式:String */) {
    ///
    for (var i = 0, len = list.length; i < len; i++) {
        if (!oNode.IsNode(list[i][0])) list[i][0] = $(list[i][0]);
        if (!oNode.IsNode(list[i][1])) list[i][1] = $(list[i][1]);
    }

    var cur = 0;
    function _click (e, th) {
        th = th || this;

        if (cur == th.index) return;
        var cur_but = list[cur][0];
        CSS.RemoveClass(cur_but, butFocusCss);
        CSS.AddClass(cur_but, butBlurCss);
        list[cur][1].style.display = 'none';

        cur_but = list[th.index][0];
        CSS.RemoveClass(cur_but, butBlurCss);
        CSS.AddClass(cur_but, butFocusCss);
        list[th.index][1].style.display = '';

        cur = th.index;
        Events.CancelAll(e);
    }

    for (var i = 0, len = list.length; i < len; i++) {
        var _cur = list[i];
        var cur_but = _cur[0];
        cur_but.index = i;
        Events.AttachEvent(cur_but, 'click', _click);
        _cur[1].style.display = i == 0 ? '' : 'none';
    }
    list[0][1].style.display = '';
};

// 移动
Effects.Move = 
function (
    bar   /* control object:HTMLElement */,
    panel /* object to move:HTMLElement */,
    arg /* 
        {
            topmost:boolean,   // :Boolean, is topmost or not
            modal:boolean,     // :Boolean, display move modal or not
            move:boolean,      // :Boolean, show move cursor or not
            top:number,        // :Number, top limit
            right:number,      // :Number, right width limit
            bottom:number,     // :Number, bottom height limit
            left:number,       // :Number, left limit
            width:number,      // :Number, move width limit
            height:number,     // :Number, move height limit
            downFunc:function, // :Function, down to execute
            moveFunc:function, // :Function, move to execute
            upFunc:function    // :Function, up   to execute
            relateBody:boolean // :Boolean, move in body or not
        } : Object
        */
    ) {//return;
    ///
    var is_down = false;
    var p = [];
    var X = 0, Y = 0;
    var x = 0, y = 0;
    var z_index = 10000;
    var topmost = false, modal = false, move,
        top, right, bottom, left, width, height,
        down_func, move_func, up_func, relateBody;

    if (arg) {
        topmost = arg.topmost;
        modal   = arg.modal;
        move    = arg.move == undefined ? true : arg.move;
        top     = arg.top;
        right   = arg.right;
        bottom  = arg.bottom;
        left    = arg.left;
        width   = arg.width;
        height  = arg.height;
        down_func = typeof arg.downFunc == 'function' ? arg.downFunc : null;
        move_func = typeof arg.moveFunc == 'function' ? arg.moveFunc : null;
        up_func   = typeof arg.upFunc   == 'function' ? arg.upFunc   : null;
        relateBody = typeof arg.relateBody == 'undefined' ? true : arg.relateBody;
    }
    
    bar.ondrag = function () {return false};
    bar.onselectstart = function () {return false};

    var back = null;
    function mouse_down (e) {
        //panel.focus();
        is_down = true;
        p[0] = e.clientX, p[1] = e.clientY;
        x = e.clientX + (relateBody ? Global.GetScrollLeft() : 0);
        y = e.clientY + (relateBody ? Global.GetScrollTop() : 0);
        X = parseInt(panel.style.left);
        Y = parseInt(panel.style.top);
        down_func && down_func(e);

        // add back
        if (!panel.$D) {
            if (!back) back = CSS.AddBack(panel);
            CSS.SetAlpha(back, 0);
            back.Show();
        }

        //CSS.SelectOff();
        Events.CancelAll(e);
    }
    function mouse_move (e) {
        if (is_down) {
            var xy = getXY(e);

            if (modal) {
                var modal_panel = panel.modal_panel;
                if (! modal_panel) {
                    modal_panel = panel.modal_panel = oNode.CreateNode('div');
                    oNode.AddNode(modal_panel, panel.parentNode);
                    with (modal_panel.style) {
                        position = 'absolute';
                        move ? (cursor = 'move') : '';
                        zIndex = panel.style.zIndex;
                        width = panel.offsetWidth + 'px';
                        height = panel.offsetHeight + 'px';
                        border = '1px dotted #000';
                    }
                    //modal_panel.tabIndex = '-1';
                    //modal_panel.focus();
                    //panel.blur();
                }
                if (topmost && ! panel.zIndex) {
                    panel.zIndex = panel.style.zIndex;
                    modal_panel.style.zIndex = z_index;
                }
                modal_panel.style.left = xy[0];
                modal_panel.style.top  = xy[1];
            }
            else {
                if (topmost && ! panel.zIndex) {
                    panel.zIndex = panel.style.zIndex;
                    panel.style.zIndex = z_index;
                }
                panel.style.left = xy[0];
                panel.style.top  = xy[1];
            }
            move_func && move_func(e);
        }
        return false;
    }
    function mouse_up (e) {
        p[2] = e.clientX, p[3] = e.clientY;
        if (is_down) {
            is_down= false;
            if (modal && panel.modal_panel) {
                if (topmost) {
                    panel.zIndex = 0;
                }
                panel.style.left = panel.modal_panel.style.left;
                panel.style.top  = panel.modal_panel.style.top;
                oNode.RemoveNode(panel.modal_panel, panel.parentNode);
                panel.modal_panel = null;
            }
            else {
                if (topmost) {
                    panel.style.zIndex = panel.zIndex;
                    panel.zIndex = 0;
                }
                var xy = getXY(e);
                panel.style.left = xy[0];
                panel.style.top  = xy[1];
            }
            //panel.focus();
            PopUp.ResetXY(panel);
            back && back.Hide();
            up_func && up_func(e, p);
        }
        else {
            //CSS.SelectOn();
        }
    }
    function getXY (e) {
        var x_t = X + e.clientX - x;
        var y_t = Y + e.clientY - y;
        var w_t = panel.offsetWidth - Global.GetClientWidth();
        var h_t = panel.offsetHeight - Global.GetClientHeight();
        var _w_t = panel.offsetWidth - Global.GetClientWidth()/2;
        var _h_t = panel.offsetHeight - Global.GetClientHeight()/2;

        if (_w_t > 0) {
            left = - (panel.offsetWidth - Global.GetClientWidth() / 2);
            right = Global.GetClientWidth() / 2;
        }
        else {
            left = 0;
            right = -w_t;
        }
        if (_h_t > 0) {
            top = - (panel.offsetHeight - Global.GetClientHeight() / 2);
            bottom = Global.GetClientHeight() / 2;
        }
        else {
            top = 0;
            bottom = -h_t;
        }

        if (x_t < left) x_t = left;
        else if (x_t > right) x_t = right;
        if (y_t < top) y_t = top;
        else if (y_t > bottom) y_t = bottom;

        x_t = x_t + (relateBody ? Global.GetScrollLeft() : 0) + 'px';
        y_t = y_t + (relateBody ? Global.GetScrollTop() : 0) + 'px';
        
        return [x_t, y_t];
    }
    Events.AttachEvent(bar, 'mousedown', mouse_down);
    Events.AttachEvent(document, 'mousemove', mouse_move);
    Events.AttachEvent(bar, 'mouseup', mouse_up);

    // 移除事件
    panel.RemoveEvent = function () {
        Events.RemoveEvent(bar, 'mousedown', mouse_down);
        Events.RemoveEvent(document, 'mousemove', mouse_move);
        Events.RemoveEvent(bar, 'mouseup', mouse_up);
    }

    // 设置position
    if (panel.style.position != 'absolute') {
        var _l = Global.GetOffsetLeft(panel);
        var _t = Global.GetOffsetTop(panel);
        panel.style.position = 'absolute';
        panel.style.zIndex = 1;
        panel.style.left = _l + 'px';
        panel.style.top = _t + 'px';
    }
    if (move && bar) bar.style.cursor = 'move';
}