fadeColor类，实现背景色和前景色渐变动画效果
2010-09-29 13:10
441 查看
最近因为工作需要，得完成个背景色和前景色渐变动画效果。Jquery的animate好像不能实现这个功能，于是自己写了个。
test.html：
<!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>无标题文档</title>
<script type="text/javascript" src="fadeColor1-2.js"></script>
<script type="text/javascript">
window.onload = function(){
var test = document.getElementById("test");
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);
};
}
</script>
</head>
<body>
<div style="width:100px; height:100px; background:#5d5c5c;color:#FFFFFF;" id="test">Test</div>
</body>
</html>
fadeColor1-2.js：
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;
}
};
test.html：
<!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>无标题文档</title>
<script type="text/javascript" src="fadeColor1-2.js"></script>
<script type="text/javascript">
window.onload = function(){
var test = document.getElementById("test");
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);
};
}
</script>
</head>
<body>
<div style="width:100px; height:100px; background:#5d5c5c;color:#FFFFFF;" id="test">Test</div>
</body>
</html>
fadeColor1-2.js：
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;
}
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- CSS实现横条或竖条或背景色渐变效果
- 动画效果之渐变、缩放、平移、旋转<代码实现>
- android开发游记：通过xml配置快速实现点击热点效果和渐变动画（不用java代码）
- Android基础-简单的动画实现 *补间动画 *透明度渐变 *旋转动画 *位移动画 *如果需要几个效果整合到一起，需要将所有效果全部放到set里
- CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果
- 利用动画实现控件背景色渐变
- JS实现响应鼠标点击动画渐变弹出层效果代码
- 一种表格背景色渐变效果的实现
- 通过CSS样式实现的html背景色渐变效果
- 一种表格背景色渐变效果的实现
- jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
- 用动画实现android app启动界面的渐变效果
- 按钮实现鼠标悬停背景色渐变的动画特效
- android 实现View的背景色渐变动画
- 利用ViewFlipper实现View间的动画效果（平移/渐变...）
- js实现按钮颜色渐变动画效果
- Android基础-简单的动画实现 *补间动画 *透明度渐变 *旋转动画 *位移动画 *如果需要几个效果整合到一起，需要将所有效果全部放到set里
- CATextLayer与CAGradientLayer实现文字渐变的动画效果