transform版点击弹窗3

其实肯定会有人问为啥用了transform,为什么动画过程不用transition.当时也考虑过,因为[链接:点击这里],所以决定直接用js做动画了.

现在搞了个transition的版本出来

function BOX_show2(obj,id,on){
    this.obj=obj;
    this.box=document.getElementById(id);
    this.oWidth = parseInt(this.getStyle(this.box, 'width'));
    this.oHeight = parseInt(this.getStyle(this.box, 'height'));
    var _this=this;
    this.obj.onclick=function(ev){
        var e=ev||event;
        _this.start(e,on).animate();
    }
}
BOX_show2.prototype={
    getStyle: function(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        };
    },
    start:function(e,on){
        var _this=this;
        this.oDiv = document.createElement('div');
        this.oDiv.id = 'BOX_overlay2';
        this.position(this.oDiv);
        document.body.appendChild(this.oDiv);
        this.scrTop=document.documentElement.scrollTop||document.body.scrollTop;
        this.oLeft = parseInt((document.documentElement.clientWidth - this.oWidth) / 2);
        this.oTop = parseInt((document.documentElement.clientHeight - this.oHeight) / 2+this.scrTop);
        this.x=parseInt(e.clientX-this.oWidth/2);
        this.y=parseInt(e.clientY-this.oHeight/2)+this.scrTop;
        this.box.style.position = 'absolute';
        this.box.style.left = this.x+'px';
        this.box.style.top = this.y+'px';
        this.box.style.zIndex = '998';
        this.css(this.box,'transform','scale(0,0)');
        this.box.style.display = 'block';
        this.css(this.box,'transition','all 0.3s ease');
        window.onresize = function() {
            _this.position(_this.oDiv);
            _this.box.style.top = (document.documentElement.clientHeight - _this.oWidth) / 2 +this.scrTop+ 'px';
            _this.box.style.left = (document.documentElement.clientWidth - _this.oHeight) / 2 + 'px';
        };
        if (on) {
            window.onscroll = function() {
                _this.move();
            }
        };
        return this;
    },
    css:function(obj,style,attr){
        obj.style[style]=attr;
        style=style.replace(/\b(\w)|\s(\w)/g, function(m){return m.toUpperCase();}); 
        obj.style['Moz'+style]=attr;
        obj.style['Webkit'+style]=attr;
        obj.style['O'+style]=attr;
    },
    animate:function(){
        var _this=this;
        setTimeout(function(){
            _this.box.style.left=_this.oLeft+'px';
            _this.box.style.top=_this.oTop+'px';
            _this.css(_this.box,'transform','scale(1,1)');
            setTimeout(function(){_this.bind()},300);
        },20)//注意这里1
    },
    bind:function(){
        var _this=this;
        var clo = this.box.getElementsByTagName("a");
        this.oDiv.ondblclick = function() {
            _this.end();
        };
        for (var i = 0; i < clo.length; i++) {
            if (clo[i].className == 'clo') {
                clo = clo[i];
                break;
            }
        };
        clo.onclick = function() {
            _this.end();
        };
        document.onkeyup = function(event) {
            var evt = window.event || event;
            var code = evt.keyCode ? evt.keyCode: evt.which;
            if (code == 27) {
                _this.end();
            }
        };
    },
    end: function() {
        var _this=this;
        this.css(this.box,'transform','scale(0,0)');
        this.box.style.left = this.x+'px';
        this.box.style.top = this.y+'px';
        setTimeout(function(){
            _this.box.style.display='none';
        },300)
        document.body.removeChild(this.oDiv);
        document.onkeyup = null;
        window.onresize = null;
        window.onscroll = null;
    },
    position: function(obj) {
        var hei = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
        obj.style.height = hei + "px";
        obj.style.width = document.documentElement.clientWidth + "px";
    },
    move: function() {
        this.box.style.position = 'fixed';
        this.box.style.top=(document.documentElement.clientHeight - this.oHeight) / 2+'px';
        this.subTop=(document.documentElement.scrollTop||document.body.scrollTop)-this.scrTop;
    }
}

1.详见上面的链接,这个值设小了,FF就没法产生动画的效果了.

这样的话不兼容transform的浏览器的效果就非常难处理了,几乎是另外写套方法了.

附上JS处理动画的链接:http://www.cnblogs.com/blog-zwei1989/archive/2012/10/17/2728077.html.