Всем спасибо за ответы, зацените замут:
<!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>Shadow Animation by mat.twg</title>
<script>
var shadow = function()
{
this.r=0;
this.g=0;
this.b=0;
this.a=0;
this.s=0;
this.timer_pointer;
this.clear = function(){clearInterval(this.timer_pointer);}
}
//------------------------
function box_init(box_obj)
{
box_obj.shadow = new shadow();
box_obj.shadow.r = 128;
box_obj.shadow.g = 129;
box_obj.shadow.b = 255;
box_obj.shadow.a = 0.3;
box_obj.shadow.s = 6;
box_obj.onmouseover = function()
{
box_obj.shadow.clear();
change_shadow(10,0,0,0,0.4, 10, 10, box_obj);
}
box_obj.onmouseout = function()
{
box_obj.shadow.clear();
change_shadow(6,128,129,255,0.3, 50, 10, box_obj);
}
box_obj.onmouseover();
}
//------------------------
function change_shadow(size, r,g,b,alpha, step,timeInterval, box_obj)
{
var increment=0;
var obj = box_obj;
var r_coff=(r-obj.shadow.r)/step;
var g_coff=(g-obj.shadow.g)/step;
var b_coff=(b-obj.shadow.b)/step;
var a_coff=(alpha-obj.shadow.a)/step;
var s_coff=(size-obj.shadow.s)/step;
var const_r = obj.shadow.r;
var const_g = obj.shadow.g;
var const_b = obj.shadow.b;
var const_a = obj.shadow.a;
var const_s = obj.shadow.s;
//if(ch_interval){clearInterval(ch_interval);}
//if(box_obj.style.shadow.show)
obj.shadow.timer_pointer = setInterval(function()
{
_n_s = (const_s*1+s_coff*increment);
_n_r = Math.round(const_r*1+r_coff*increment);
_n_g = Math.round(const_g*1+g_coff*increment);
_n_b = Math.round(const_b*1+b_coff*increment);
_n_a = (const_a*1+a_coff*increment);
obj.shadow.s = _n_s;
obj.shadow.r = _n_r;
obj.shadow.g = _n_g;
obj.shadow.b = _n_b;
obj.shadow.a = _n_a;
obj.style.cssText="box-shadow: rgba("+_n_r+","+_n_g+","+_n_b+","+_n_a+") 0pt 0pt "+_n_s+"pt 0pt;"+
"-webkit-box-shadow:rgba("+_n_r+","+_n_g+","+_n_b+","+_n_a+") 0pt 0pt "+_n_s+"pt 0pt;"+
"-moz-box-shadow: rgba("+_n_r+","+_n_g+","+_n_b+","+_n_a+") 0pt 0pt "+_n_s+"pt 0pt;";
if(increment<step){ increment++; }
else{clearInterval(obj.shadow.timer_pointer); }
}, timeInterval);
}
//------------------------
</script>
<style>
html
{
margin: 0;
padding: 0;
height:100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
overflow: hidden;
cursor: default;
background-repeat: no-repeat;
background-position: center top;
font-size: 14px;
background-color:#CCC;
background-attachment: fixed;
font-family:Arial, Helvetica, sans-serif;
}
.test
{
width: 100px;
height: 100px;
margin:auto;
border: 1px solid rgba(0,128,128,0.3);
border-radius: 6px;
-moz-border-radius: 6px;
box-shadow: rgba(128,129,255, 0.3) 0pt 0pt 6pt 0pt;
-webkit-box-shadow: rgba(128,129,255, 0.3) 0pt 0pt 6pt 0pt;
-moz-box-shadow: rgba(128,129,255, 0.3) 0pt 0pt 6pt 0pt;
}
</style>
</head>
<body>
<table width="100%" border="0" style="height:100%" align="center">
<tr>
<td><div class="test" onmouseover="box_init(this);"></div></td>
<td><div class="test" onmouseover="box_init(this);"></div></td>
<td><div class="test" onmouseover="box_init(this);"></div></td>
<td><div class="test" onmouseover="box_init(this);"></div></td>
<td><div class="test" onmouseover="box_init(this);"></div></td>
<td><div class="test" onmouseover="box_init(this);"></div></td>
<td><div class="test" onmouseover="box_init(this);"></div></td>
</tr>
</table>
</body>
</html>
ps: тестировал в опере11, Хорме, FF3.6, сафари5.
