[Javascript] 层控制(隐藏、显示、卷起、展开)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Animate</title>

<script>

(

function(){

if(!window.dk){window['dk']={} }

//根据ID获取对象

function $(){

    if(typeof(arguments[0]) == 'string')

        return document.getElementById(arguments[0]);

    else

        return arguments[0];

   }

window['dk']['$']=$;

//根据Class名称获取对象

function getElementByClassName(){};

window['dk']['getElementByClassName']=getElementByClassName;

//绑定事件

function addEvent(node,type,listener){

    //if(!(node=$(node))){return false;}

    if(node.addEventListener){

        node.addEventListener(type,listener,false);

        return true;

    }

    else if(node.attachEvent){

         node['e'+type+listener]=listener;

        node[type+listener]=function(){

            node['e'+type+listener](window.event);

            }

        node.attachEvent('on'+type,node[type+listener]);

        return true;

    }

    return false;

 }

window['dk']['addEvent']=addEvent;

//移出绑定的事件

function removeEvent(node, type, listener){

    if(node.removeEventListener){

        node.removeEventListener(type,listener,false);

        return true;

    }else if(node.detachEvent){

        node.detachEvent('on' + type, node[type+listener]);

        node[type + listener] = null;

        return true;

    }

    return false;

}

window['dk']['removeEvent'] = removeEvent;

//绑定函数的执行对象

function bind(targetObj,func){

    var args = Array.prototype.slice.call(arguments).slice(2);

    return function() {

        return func.apply(targetObj, args.concat(Array.prototype.slice.call(arguments)));

    }

}

window['dk']['bind']=bind;

//检查childNode是被包含在parentNode中

function contains(parentNode,childNode){

    return parentNode.contains ? parentNode != childNode && parentNode.contains(childNode) : !!(parentNode.compareDocumentPosition(childNode) & 16);

    }

window['dk']['contains']=contains;

//获取Event对象

function getEvent(e){

    return e || window.event;

    }

window['dk']['getEvent']=getEvent;

//停止冒泡

function stopBubble(e){

    getEvent(e).bubbles?getEvent(e).stopPropagation():getEvent(e).cancelBubble=true;

    }

window['dk']['stopBubble']=stopBubble;

//恢复冒泡

function startBubble(e){

    getEvent(e).initEvent?getEvent(e).initEvent():getEvent(e).cancelBubble=false;

    }

window['dk']['startBubble']=startBubble;

//检查mouseover和mouseout模式下取消事件派发

function checkHover(e,target){

    if(dk.getEvent(e).type=="mouseover"){

        return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);

        }

    else{

        return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);

        }

    }

window['dk']['checkHover']=checkHover;

//获取事件触发的对象

function getEventTarget(e){

    return dk.getEvent(e).target || dk.getEvent(e).srcElement;

}

window['dk']['getEventTarget']=getEventTarget;

//获取窗口的大小

function getBrowserSize(){

    var de=document.documentElement;

    return {

        width:(window.innerWidth||(de&&de.clientWidth)||document.body.clientWidth),

        height:(window.innerHeight||(de&&de.clientHeight)||document.body.clientHeight)}

}

window['dk']['getBrowserSize']=getBrowserSize;

//获取对象在页面中的位置

function getPositionInDoc(target){

    (typeof(target) == 'string') && (target = document.getElementById(target));

    var left = 0, top = 0;

    do {

        left += target.offsetLeft || 0;

        top += target.offsetTop || 0;

        target = target.offsetParent;

    }

    while (target);

    return {

        left: left,

        top: top

    };

}

window['dk']['getPositionInDoc'] = getPositionInDoc;

window['dk']['pageDom'] = getPositionInDoc;

//获取鼠标在Document中的位置

function getMousePositionInDoc(e){

    var scrollx, scrolly;

    if (typeof(window.pageXOffset) == 'number') {

        scrollx = window.pageXOffset;

        scrolly = window.pageYOffset;

    }

    else {

        scrollx = document.documentElement.scrollLeft;

        scrolly = document.documentElement.scrollTop;

    }

    return {

        x: e.clientX + scrollx,

        y: e.clientY + scrolly

    }

}

window['dk']['getMousePositionInDoc'] = getMousePositionInDoc;

window['dk']['pageMouse'] = getMousePositionInDoc;

//日志

function myLogs(id){

    id=id||'defaultDebugLogs';

    var logsWindow=null;

    var initWindow=function(){

        logsWindow=document.createElement('ol');

        logsWindow.setAttribute('id',id);

        var winStyle=logsWindow.style;

        winStyle.position='absolute';

        winStyle.top='10px';

        winStyle.right='10px'

        winStyle.width='200px';

        winStyle.height='300px';

        winStyle.border='1px solid #ccc';

        winStyle.background='#fff';

        winStyle.padding=0;

        winStyle.margin=0;

        document.body.appendChild(logsWindow);

    }

    this.writeRow=function(message){

        logsWindow||initWindow();

        var newItem=document.createElement('li');

        newItem.style.padding='2px';

        newItem.style.margin='0 0 1px 0';

        newItem.style.background='#eee';

        if(typeof(message)=='undefined'){

            newItem.innerHTML='<span style=\"color:#f90;\">Message is undefined</span>';

        }

        else{

            newItem.innerHTML=message;

        }

        logsWindow.appendChild(newItem);

    }

}

myLogs.prototype={

    write:function(message){

        if(typeof(message) == 'string'&&message.length==0){

            return this.writeRow('<span style=\"color:#900;\">warning:</span> empty message');

        }

        if(typeof(message) != 'string' && typeof(message) != 'undefined'){

            if(message.toString) return this.writeRow(message.toString());

            else return this.writeRow(typeof(message));

        }

        if(typeof(message) == 'undefined'){

            return this.writeRow('<span style=\"color:#f90;\">Message is undefined</span>');

        }

        message=message.replace(/</g,"&lt;").replace(/</g,"&gt;");

        return this.writeRow(message);

    },

    header:function(message){

    }

}

window['dk']['logs'] = new myLogs();

//Dom加载完成事件

function ready(loadEvent){

    var init = function(){

        if(arguments.callee.done)

            return;

        arguments.callee.done = true;

        loadEvent.apply(document,arguments);

    }

    if(document.addEventListener){

        document.addEventListener('DOMContentLoaded',init,false);

    }

    if(/WebKit/i.test(navigator.userAgent)){

        var _timer = setInterval(function(){

            if(/loaded|complete/.test(document.readyState)){

                clearInterval(_timer);

                init();

            }

        },10)

    }

    /*@if(@_win32)*/

    document.write('<script id=__ie_onload defer src=javascript:void(0)><\/script>');

    var script = document.getElementById('__ie_onload');

    script.onreadystatechange = function(){

        if(this.readyState == 'complete'){

            init();

        }

    }

    /*@end @*/

    return true;

}

window['dk']['ready'] = ready;

})();

var _$ = function(node){

    if(typeof(node) == 'string'){

        node = dk.$(node);

    }

    this.node= node;

}

_$.prototype = {

    fixover:function(func){

        dk.addEvent(this.node,'mouseover',function(e){

            if(dk.checkHover(e,this)){

                func(e);

            }

        });

        return this;

    },

    fixout:function(func){

        dk.addEvent(this.node,'mouseout',function(e){

            if(dk.checkHover(e,this)){

                func(e);

            }

        })

        return this;

    },

    css:function(styleName){

        if (this.node.currentStyle) {

            var value = this.node.currentStyle[styleName];

            if(value == 'auto' && styleName == 'width'){

                value = this.node.clientWidth;

            }

            if(value == 'auto' && styleName == 'height'){

                value = this.node.clientHeight;

            }

            return value;

        }

        else if (window.getComputedStyle) {

            var value = window.getComputedStyle(this.node, null).getPropertyValue(this.getSplitName(styleName));

            return value;

        }

    },

    getSplitName:function(styleName){

        return styleName.replace(/([A-Z])/g, '-$1').toLowerCase();

    }

}

$$ = function(node){

    return new _$(node);

}

var Tween={

    Linear: function(t,b,c,d){ return c*t/d + b; },

    Quad: {

        easeIn: function(t,b,c,d){

            return c*(t/=d)*t + b;

        },

        easeOut: function(t,b,c,d){

            return -c *(t/=d)*(t-2) + b;

        },

        easeInOut: function(t,b,c,d){

            if ((t/=d/2) < 1) return c/2*t*t + b;

            return -c/2 * ((--t)*(t-2) - 1) + b;

        }

    },

    Cubic: {

        easeIn: function(t,b,c,d){

            return c*(t/=d)*t*t + b;

        },

        easeOut: function(t,b,c,d){

            return c*((t=t/d-1)*t*t + 1) + b;

        },

        easeInOut: function(t,b,c,d){

            if ((t/=d/2) < 1) return c/2*t*t*t + b;

            return c/2*((t-=2)*t*t + 2) + b;

        }

    },

    Quart: {

        easeIn: function(t,b,c,d){

            return c*(t/=d)*t*t*t + b;

        },

        easeOut: function(t,b,c,d){

            return -c * ((t=t/d-1)*t*t*t - 1) + b;

        },

        easeInOut: function(t,b,c,d){

            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

            return -c/2 * ((t-=2)*t*t*t - 2) + b;

        }

    },

    Back: {

        easeIn: function(t,b,c,d,s){

            if (s == undefined) s = 1.70158;

            return c*(t/=d)*t*((s+1)*t - s) + b;

        },

        easeOut: function(t,b,c,d,s){

            if (s == undefined) s = 1.70158;

            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

        },

        easeInOut: function(t,b,c,d,s){

            if (s == undefined) s = 1.70158;

            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

        }

    }

}

var Motion=function(target){

    var t = 0;

    var d = 150;

    var delayTime = 10;

    var styles=null;

    var stylesChange={};

    var stylesBegin={};

    var callBackFunc=null;

    var timer=null;

    var quickStylesBefore=null;

    var quickStylesAfter=null;

    var animateStatus=false;

    var funcQueue=[];

    if(typeof(target)=='string')

        target=document.getElementById(target);

    this.resetStatus=function(){

        t=0;

        styles=null;

        stylesChange={};

        stylesBegin={};

        callBackFunc=null;

        timer=null;

        quickStylesBefore=null;

        quickStylesAfter=null;

    }

    this.setDelayTime=function(_delayTime){

        delayTime = _delayTime;

    }

    this.setStyles=function(_styles){

        styles=_styles;

    }

    this.setCallBackFunc=function(_callBackFunc){

        callBackFunc=_callBackFunc;

    }

    this.pushFuncToQueue = function(funcString){

        funcQueue.push(funcString);

    }

    this.getAnimateStatus=function(){

        return animateStatus;

    }

    this.setQuickStyle=function(_quickStyles,quickType){

        if(quickType)

            quickStylesBefore = _quickStyles;

        else

            quickStylesAfter = _quickStyles;

    }

    this.getTargetStyle=function(){

        return {width:target.style.width || target.clientWidth,height:target.style.height || target.clientHeigth}

    }

    var calculatChange=function(){

        for(var styleName in styles){

            stylesChange[styleName]=parseInt(styles[styleName])-parseInt(target.style[styleName] || 0);

            stylesBegin[styleName]=parseInt(target.style[styleName] || 0);

        }

    }

    var setTargetStyles=function(_styles){

        for(var styleName in _styles){

            target.style[styleName]=_styles[styleName];

        }

    }

    var beforeRun = function(){

        quickStylesBefore && setTargetStyles(quickStylesBefore);

        calculatChange();

        target.style.display='block';

        animateStatus = true;

    }

    this.afterRun = function(){

        if(target.style.width=='0px'||target.style.height=='0px')

            target.style.display='none';

        quickStylesAfter && setTargetStyles(quickStylesAfter);

        if(funcQueue.length>0)

        {

            animateStatus = false;

            var currentFuncArray=funcQueue.shift();

            return currentFuncArray[0].apply(this,currentFuncArray[1]);

        }

        animateStatus = false;

        //this.slideDown();

    }

    this.run=function(){

        (t == 0) && beforeRun();

        for(var styleName in styles){

            target.style[styleName]=Tween.Quad.easeInOut(t,stylesBegin[styleName],stylesChange[styleName],d) + 'px';

        }

        t++;

        if(t<=d)

            return timer = setTimeout(dk.bind(this,this.run),delayTime);

        this.afterRun();

        if(callBackFunc)

            return callBackFunc();

    }

}

Motion.prototype={

    animate : function(styles,callBackFunc){

        if(this.getAnimateStatus())

            return this.pushFuncToQueue([this.animate,arguments]);

        this.resetStatus();

        this.setStyles(styles)

        this.setCallBackFunc(callBackFunc);

        this.run();

    },

    slideDown:function(callBackFunc){

        if(this.getAnimateStatus())

            return this.pushFuncToQueue([this.slideDown,arguments]);

        this.resetStatus();

        var targetStyle=this.getTargetStyle();

        this.setQuickStyle({height:'0px'},true);

        this.setStyles({height:targetStyle.height});

        this.setCallBackFunc(callBackFunc);

        this.run();

    },

    slideUp:function(callBackFunc){

        if(this.getAnimateStatus())

            return this.pushFuncToQueue([this.slideUp,arguments]);

        this.resetStatus();

        var targetStyle=this.getTargetStyle();

        this.setQuickStyle({height:targetStyle.height},false);

        this.setStyles({height:'0px'});

        this.setCallBackFunc(callBackFunc);

        this.run();

    },

    show:function(callBackFunc){

        this.resetStatus();

        var targetStyle=this.getTargetStyle();

        this.setQuickStyle({width:'0px',height:'0px'},true);

        this.setStyles({width:targetStyle.width,height:targetStyle.height});

        this.setCallBackFunc(callBackFunc);

        this.run();

    },

    hide:function(callBackFunc){

        this.resetStatus();

        var targetStyle=this.getTargetStyle();

        this.setQuickStyle({width:targetStyle.width,height:targetStyle.height},false);

        this.setStyles({width:'0px',height:'0px'});

        this.setCallBackFunc(callBackFunc);

        this.run();

    }

}

var divA;

window.onload=function(){

    divA=new Motion('myDiv');

}

</script>

</head>

<body>

<div id="myDiv" style="position:absolute;left:0;background:#f00; overflow:hidden;width:300px; height:500px;display:block;">This is out test content.</div>

<div id="div2" style="position:absolute; right:0; background:#ff0;"><a href="http://www.baidu.com" target="_blank" onclick="alert('a');return false;">Hello</a></div>

<input type="button" id="btn1" value="hide" onclick="divA.animate({width:'0px'})" style="position:fixed; bottom:0; left:40%;"/>

<input type="button" id="btn2" value="show" onclick="divA.animate({width:'600px'})" style="position:fixed; bottom:0; left:50%;"/>

<input type="button" id="btn3" value="slideUp" onclick="divA.slideUp()" style="position:fixed; bottom:0; left:60%;"/>

<input type="button" id="btn4" value="slideDown" onclick="divA.slideDown()" style="position:fixed; bottom:0; left:70%;"/>

</body>

</html>
巴特西

[Javascript] 层控制(隐藏、显示、卷起、展开)

最新文章

热门文章
