主要學到了十六進制的轉換與計算。
<!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>
<link href=".css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/ajax_js/prototype.js"></script>
<script>
/**
* auto drop obj's background-color
*
* @para String box_id, Element's id
* @para String _souceColor, chars length = 6, hex, not contain '#'
* @para String _targeColor, chars length = 6, hex, not contain '#'
* @reutrn null;
*/
var autoDropColor=function(box_id, _souceColor, _targeColor) {
$(box_id).style.backgroundColor= '#'+ _souceColor;
if(_souceColor.toUpperCase() == _targeColor.toUpperCase()) {
return null;
}
var __dropValue = 0x6;
var __spaceTime = 20;
var color_rgb = '';
var s_color_r = parseInt(_souceColor.substr(0, 2), 16);
var s_color_g = parseInt(_souceColor.substr(2, 2), 16);
var s_color_b = parseInt(_souceColor.substr(4, 2), 16);
var t_color_r = parseInt(_targeColor.substr(0, 2), 16);
var t_color_g = parseInt(_targeColor.substr(2, 2), 16);
var t_color_b = parseInt(_targeColor.substr(4, 2), 16);
var new_color_r = ((s_color_r += __dropValue) < t_color_r ? s_color_r : t_color_r).toString(16);
var new_color_g = ((s_color_g += __dropValue) < t_color_g ? s_color_g : t_color_g).toString(16);
var new_color_b = ((s_color_b += __dropValue) < t_color_b ? s_color_b : t_color_b).toString(16);
(new_color_r.length > 1) ? '' : new_color_r ='0'+new_color_r;
(new_color_g.length > 1) ? '' : new_color_g ='0'+new_color_g;
(new_color_b.length > 1) ? '' : new_color_b ='0'+new_color_b;
color_rgb = new_color_r + new_color_g + new_color_b;
setTimeout("autoDropColor('"+ box_id +"','" + color_rgb+"', '" + _targeColor + "')", __spaceTime);
}
/**
* auto rise obj's background-color
*
* @para String box_id, Element's id
* @para String _souceColor, chars length = 6, hex, not contain '#'
* @para String _targeColor, chars length = 6, hex, not contain '#'
* @reutrn null;
*/
var autoRiseColor=function(box_id, _souceColor, _targeColor) {
$(box_id).style.backgroundColor= '#'+ _souceColor;
if(_souceColor.toUpperCase() == _targeColor.toUpperCase()) {
return null;
}
var __dropValue = 0x6;
var __spaceTime = 20;
var color_rgb = '';
var s_color_r = parseInt(_souceColor.substr(0, 2), 16);
var s_color_g = parseInt(_souceColor.substr(2, 2), 16);
var s_color_b = parseInt(_souceColor.substr(4, 2), 16);
var t_color_r = parseInt(_targeColor.substr(0, 2), 16);
var t_color_g = parseInt(_targeColor.substr(2, 2), 16);
var t_color_b = parseInt(_targeColor.substr(4, 2), 16);
var new_color_r = ((s_color_r -= __dropValue) > t_color_r ? s_color_r : t_color_r).toString(16);
var new_color_g = ((s_color_g -= __dropValue) > t_color_g ? s_color_g : t_color_g).toString(16);
var new_color_b = ((s_color_b -= __dropValue) > t_color_b ? s_color_b : t_color_b).toString(16);
(new_color_r.length > 1) ? '' : new_color_r ='0'+new_color_r;
(new_color_g.length > 1) ? '' : new_color_g ='0'+new_color_g;
(new_color_b.length > 1) ? '' : new_color_b ='0'+new_color_b;
color_rgb = new_color_r + new_color_g + new_color_b;
setTimeout("autoRiseColor('"+ box_id +"','" + color_rgb+"', '" + _targeColor + "')", __spaceTime);
}
</script>
</head>
<body>
<div id="colorBox" style="width:250px; height:120px; background-color:#97CC02;border:#fefefe 1px solid;" width="392"></div>
<input id="testbtn" type="button" onclick="autoDropColor('colorBox', '666602', '97CC02');" value="color drop" />
<input id="testbtn" type="button" onclick="autoRiseColor('colorBox', 'ffff02', '97CC02');" value="color rise" />
<p> </p>
<div id="colorBox2" style="width:250px; height:120px; background-color:#ffffff;border:#efefef 1px solid;" width="392"></div>
<input id="testbtn" type="button" onclick="autoDropColor('colorBox2', 'ffff00', 'ffffff');" value="test color drop" />
</body>
</html>
