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.