加载中…js改变动态背景颜色
(2011-04-11 16:11:14)
标签：
firefoxie兼容样式背景色动画settimeout颜色值转换十六进制it |
分类： Javascript |
最近喉咙依旧犯贱, 看了一些关于js的东西, 感觉渐渐上手了, 于是让我继续犯贱吧……
前几天看了这个个人博客，发觉它下面用table做的的小细线挺有趣的，大家可以看看http://crazyphper.com/
手痒痒的也就想试试，变相写了这样一个东西：
一个div来显示背景颜色，一个颜色框来输入16进制颜色值，一个按钮来激发事件。原本div背景色为白色，输入颜色值之后按按钮，div背景色会从当前颜色动画过渡到目标颜色。
点击后就是这样一个状态，但是截图没有动画效果，附上源代码：
（2011.7.26看了一下，发现里面新浪博客贴出来的代码会给修改掉：
getElementByIdx_x (id); 多了“x_x”；
string.substr(array[x] ,1); 少了“% 16”；
所以我申请了个新DBank的空间来存放页面供大家下载，你可以点这里下载：
http://dl.dbank.com/c09a4cadkv
）
<!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>Color</title>
<style type="text/css">
body{ background:#CCCCCC;}
.color{ background-color:#ffffff; color:#000000; height:200px; width:300px;}
</style>
</head>
<body>
<div class="color" id="box"></div>
<form name="form">
<input type="text" name="input1"/>
<input type="button" value="变色" onclick="color()"/>
</form>
<script language="javascript">
function $(id){
return document.getElementByIdx_x_x_x_x (id);
}
function gs(obj,name){
return (obj.currentStyle)?obj.currentStyle[name]:window.getComputedStyle(obj,null)[name];
}
function h2rgb(h){
var
string="0123456789abcdef";
var
array=new Array(3);
for(var
x=0;x<3;x++){
array[x]=h.slice(x*2,x*2+2);
var
i=array[x].slice(0,1);
var
j=array[x].slice(1);
array[x+3]=string.indexOf(i)*16+string.indexOf(j);
}
return
array.slice(3,6);
}
function rgb2h(array){
var
string="0123456789abcdef";
var
h="";
for(var
x=0;x<3;x++){
h+=string.substr(Math.floor(array[x]/16),1)+string.substr(array[x]
,1);
}
return
h;
}
function change(array,array2){
var
key=5;
var step=new Array(3);
for(var
x=0;x<3;x++){
//step[x]=array[x]+Math.ceil((array2[x]-array[x])/5);
if(array2[x]-array[x]>0&&array[x]+key<array2[x])
step[x]=array[x]+key;
else
if(array2[x]-array[x]<0&&array[x]-key>array2[x])
step[x]=array[x]-key;
else
step[x]=array2[x];
}
return
step;
}
function color(){
var
timer;
if(!$("box").currentStyle){
var
array=gs($("box"),"backgroundColor").slice(4,-1).split(",");//split后字符数组
array=h2rgb(rgb2h(array));
}
else{
var
array=h2rgb(gs($("box"),"backgroundColor").slice(1));
}
var
array2=h2rgb(document.form.input1.value);
if((array[0]!=array2[0])||(array[1]!=array2[1])||(array[2]!=array2[2])){
$("box").style.backgroundColor="#"+rgb2h(change(array,array2));
clearTimeout(timer);
timer=setTimeout(color,100);
}
else{
clearTimeout(timer);
$("box").style.backgroundColor="#"+rgb2h(array2);
}
}
</script>
</body>
</html>
我把里面主要功能都用函数来分割:
$(id)用id获取元素；
gs(obj,name)根据对象获取元素样式；
h2rgb(h)16进制颜色值转换成rgb颜色值用数字型数组返回；
rgb2h(array)rgb颜色值转换成16进制颜色值用字符串形式返回；
change(array,array2)将原颜色值array转换到目标颜色array2,key可以动画变换速度；
color()获取当前颜色以及目标颜色后调用change(array,array2)同时递归产生动画。
兼容FF,IE6/7/8，其中兼容点有：
1、FF跟IE获取样式表
2、FF得到的颜色值为RGB,而IE得到的却是十六进制字符串
小小作品，证明目前还是有进步的哈...
前几天看了这个个人博客，发觉它下面用table做的的小细线挺有趣的，大家可以看看http://crazyphper.com/
手痒痒的也就想试试，变相写了这样一个东西：
一个div来显示背景颜色，一个颜色框来输入16进制颜色值，一个按钮来激发事件。原本div背景色为白色，输入颜色值之后按按钮，div背景色会从当前颜色动画过渡到目标颜色。
点击后就是这样一个状态，但是截图没有动画效果，附上源代码：
（2011.7.26看了一下，发现里面新浪博客贴出来的代码会给修改掉：
getElementByIdx_x (id); 多了“x_x”；
string.substr(array[x] ,1); 少了“% 16”；
所以我申请了个新DBank的空间来存放页面供大家下载，你可以点这里下载：
http://dl.dbank.com/c09a4cadkv
）
<!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>Color</title>
<style type="text/css">
body{ background:#CCCCCC;}
.color{ background-color:#ffffff; color:#000000; height:200px; width:300px;}
</style>
</head>
<body>
<div class="color" id="box"></div>
<form name="form">
<input type="text" name="input1"/>
<input type="button" value="变色" onclick="color()"/>
</form>
<script language="javascript">
function $(id){
return document.getElementByIdx_x_x_x_x (id);
}
function gs(obj,name){
return (obj.currentStyle)?obj.currentStyle[name]:window.getComputedStyle(obj,null)[name];
}
function h2rgb(h){
}
function rgb2h(array){
}
function change(array,array2){
}
function color(){
}
</script>
</body>
</html>
我把里面主要功能都用函数来分割:
$(id)用id获取元素；
gs(obj,name)根据对象获取元素样式；
h2rgb(h)16进制颜色值转换成rgb颜色值用数字型数组返回；
rgb2h(array)rgb颜色值转换成16进制颜色值用字符串形式返回；
change(array,array2)将原颜色值array转换到目标颜色array2,key可以动画变换速度；
color()获取当前颜色以及目标颜色后调用change(array,array2)同时递归产生动画。
兼容FF,IE6/7/8，其中兼容点有：
1、FF跟IE获取样式表
2、FF得到的颜色值为RGB,而IE得到的却是十六进制字符串
小小作品，证明目前还是有进步的哈...
喜欢
0
赠金笔
前一篇：ie6实现fixed
后一篇：IE6左右边框断线现象