标签：nts null func alpha doctype oct div tag timer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OOP淡入淡出</title> <style type="text/css"> div { width: 200px; height: 160px; margin: auto; border: 20px solid springgreen; background-color: palevioletred; filter: alpha(opacity: 30); opacity: 0.3; } </style> <script type="text/javascript"> function FnGuo(oDiv){ var _this = this; this.nowAlpha = 30; this.oTimer = null; oDiv.onmouseover = function(){ _this.fnOpacity(oDiv,100); }; oDiv.onmouseout = function(){ _this.fnOpacity(oDiv,30); }; } FnGuo.prototype.fnOpacity = function(oDiv,tarAlpha){ clearInterval(this.oTimer); //注意setInterval函数里面的this是定时器本身，如果访问类FnGuo的成员变量比如nowAlpha，必须在函数setInterval外保存this。 var _this = this; this.oTimer = setInterval(function(){ if(tarAlpha > _this.nowAlpha) { _this.nowAlpha += 2; oDiv.style.filter = ‘alpha(opacity:‘+ _this.nowAlpha +‘)‘; oDiv.style.opacity = _this.nowAlpha/100; } else if(tarAlpha < _this.nowAlpha) { _this.nowAlpha -= 2; oDiv.style.filter = ‘alpha(opacity:‘+ _this.nowAlpha +‘)‘; oDiv.style.opacity = _this.nowAlpha/100; } else { //clearInterval(_this.oTimer); } },30); }; window.onload = function(){ var oDiv = document.getElementsByTagName("div")[0]; var oFnGuo = new FnGuo(oDiv); }; </script> </head> <body> <div></div> </body> </html>
标签：nts null func alpha doctype oct div tag timer
原文地址：http://www.cnblogs.com/fengyouqi/p/7879093.html
