浏览 3586 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-06-01
window.Sys = function (ua){ var b = { ie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie6 = b.ie && parseInt(b.version, 10) == 6; b.ie7 = b.ie && parseInt(b.version, 10) == 7; b.ie8 = b.ie && parseInt(b.version, 10) == 8; return b; }(window.navigator.userAgent.toLowerCase()); function toHex(num){ var str = "0"+num.toString(16); return str.substring(str.length-2); } function fadeColor(obj){ this.obj = obj; this.bgTimer = null; this.foreTimer = null; this.FPS = 20; }; fadeColor.prototype = { getSrcColor:function(flag){ var srcColor,sR,sG,sB; if(flag){ //bgColor if(window.Sys.ie){ srcColor = this.obj.currentStyle.backgroundColor } else{ var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null); srcColor = myComputedStyle.backgroundColor } } else{ //foreColor if(window.Sys.ie){ srcColor = this.obj.currentStyle.color } else{ var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null); srcColor = myComputedStyle.color } } if(window.Sys.ie){ sR = parseInt(srcColor.substring(1,3),16); sG = parseInt(srcColor.substring(3,5),16); sB = parseInt(srcColor.substring(5),16); } else{ sR = srcColor.match(/\d+/ig)[0]; sG = srcColor.match(/\d+/ig)[1]; sB = srcColor.match(/\d+/ig)[2]; } return (eval("({sR:"+sR+",sG:"+sG+",sB:"+sB+"})")); }, startTimer:function(destColor,duration,flag){ var sR,sG,sB,dR,dG,dB,offR,offG,offB,stepR,stepG,stepB,srcColor,maxOffset,step; var _self = this; srcColor = _self.getSrcColor(flag); sR = srcColor.sR; sG = srcColor.sG; sB = srcColor.sB; dR = parseInt(destColor.substring(1,3),16); dG = parseInt(destColor.substring(3,5),16); dB = parseInt(destColor.substring(5),16); offR = dR - sR; offG = dG - sG; offB = dB - sB; maxOffset = Math.max(Math.abs(offR),Math.abs(offG)); maxOffset = Math.max(maxOffset,Math.abs(offB)); step = Math.ceil(maxOffset/Math.round(_self.FPS/1000*duration)); stepR = (offR == 0 ? 0 : step * (offR / Math.abs(offR))); stepG = (offG == 0 ? 0 : step * (offG / Math.abs(offG))); stepB = (offB == 0 ? 0 : step * (offB / Math.abs(offB))); if(flag){ //bgColor _self.bgTimer = setInterval(function(){ sR += stepR; sG += stepG; sB += stepB; sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR)); sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG)); sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB)); if(sR == dR && sG == dG && sB == dB){ clearInterval(_self.bgTimer); } _self.obj.style.backgroundColor = "#"+toHex(sR)+toHex(sG)+toHex(sB); },_self.FPS); } else{ //foreColor _self.foreTimer = setInterval(function(){ sR += stepR; sG += stepG; sB += stepB; sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR)); sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG)); sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB)); if(sR == dR && sG == dG && sB == dB){ clearInterval(_self.foreTimer); } _self.obj.style.color = "#"+toHex(sR)+toHex(sG)+toHex(sB); },_self.FPS); } }, fadeBgColor:function(destColor , duration){ this.stopTimer(1); this.startTimer(destColor , duration ,1); }, fadeForeColor:function(destColor , duration){ this.stopTimer(0); this.startTimer(destColor , duration ,0); }, stopTimer:function(flag){ if(flag){ clearInterval(this.bgTimer); this.bgTimer = null; } else{ clearInterval(this.foreTimer); this.foreTimer = null; } }, setFPS:function(fps){ this.FPS = fps; } }; 调用方法: window.onload = function(){ var test = document.getElementById("test"); //test为页面中的一个DOM元素。 var fadeObj; fadeObj = new fadeColor(test); test.onmouseover = function(){ fadeObj.fadeBgColor("#FFFFFF",1000); fadeObj.fadeForeColor("#000000",1000); }; test.onmouseout = function(){ fadeObj.fadeBgColor("#5d5c5c",1000); fadeObj.fadeForeColor("#FFFFFF",1000); }; } 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |