魔兽技能CD效果

<!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>WarICON Prefect</title>
<style>
.icoBox
{
	position: absolute;
	overflow: hidden;
	 64px;
	height: 64px;
	background: #000;
}
.icoBox *
{
	margin: 0;
	position: absolute;
}
.icoBox .mask
{
	display: none;
	overflow: hidden;
	border: 33px solid #000001;

filter: Chroma(color='black') alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
}
.icoBox .layer0
{
	height: 0px;
	left: 33px;
	top: -33px;

border-top: 33px solid transparent;
	border-left: 0px solid transparent;
}
.icoBox .layer1
{
	 0px;
	left: 33px;
	top: 33px;

border-top: 0px solid transparent;
	border-right: 33px solid transparent;
}
.icoBox .layer2
{
	left:-33px;
	top: 33px;

border-bottom: 33px solid transparent;
	border-right: 0px solid transparent;
}
.icoBox .layer3
{
	left: -33px;
	top: -33px;

border-bottom: 0px solid transparent;
	border-left: 33px solid transparent;
}
.icoBox
{
	position: absolute;
	overflow: hidden;
	 64px;
	height: 64px;
	background: #000;
}
.icoBox *
{
	margin: 0;
	position: absolute;
}
.icoBox .mask
{
	display: none;
	overflow: hidden;
	border: 33px solid #000001;

filter: Chroma(color='black') alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
}
.icoBox .layer0
{
	height: 0px;
	left: 33px;
	top: -33px;

border-top: 33px solid transparent;
	border-left: 0px solid transparent;
}
.icoBox .layer1
{
	 0px;
	left: 33px;
	top: 33px;

border-top: 0px solid transparent;
	border-right: 33px solid transparent;
}
.icoBox .layer2
{
	left:-33px;
	top: 33px;

border-bottom: 33px solid transparent;
	border-right: 0px solid transparent;
}
.icoBox .layer3
{
	left: -33px;
	top: -33px;

border-bottom: 0px solid transparent;
	border-left: 33px solid transparent;
}
</style>
</head>

if(__FF__)
{
	CSSStyleDeclaration.prototype.__defineSetter__("pixelHeight", function(v){this.height = v+"px";});
	CSSStyleDeclaration.prototype.__defineSetter__("pixelWidth", function(v){this.width = v+"px";});
	CSSStyleDeclaration.prototype.__defineSetter__("pixelTop", function(v){this.top = v+"px";});
	CSSStyleDeclaration.prototype.__defineSetter__("pixelLeft", function(v){this.left = v+"px";});
}

try{document.execCommand("BackgroundImageCache", false, true)}catch(e){}
</script>
<script type="text/javascript">
var styPic = $("divBGPic").style;
var arrMask = [];
var tickID;
var stage;
var inCD;
window.onload =function()
{
	var i,obj;

for(i=0; i<4; i++)
	{
		obj = $c("div");
		obj.className = "mask layer" + i;
		arrMask[i] = obj.style;

$("divBox").appendChild(obj);
	}
};
function handleMouseDown()
{
	styPic.pixelLeft = 2;
	styPic.pixelTop = 2;
	styPic.pixelWidth = 60;
	styPic.pixelHeight = 60;
}
document.onmouseup =function(e)
{
	styPic.pixelLeft = 0;
	styPic.pixelTop = 0;
	styPic.pixelWidth = 64;
	styPic.pixelHeight = 64;

e = e || event;
	e = e.srcElement || e.target;

if(e != $("divBGPic"))
		return;

if(inCD)
		return;
	inCD = true;

tickID = 0;
	stage = 0;
	Reset();
};
function Draw()
{
	if(!inCD)
		return;

var i = ++tickID;

switch(stage)
	{
	case 0:
		arrMask[0].borderLeftWidth = i + "px";
		break;
	case 1:
		arrMask[0].pixelHeight = i;
		arrMask[0].borderBottomWidth = (33-i) + "px";
		break;
	case 2:
		arrMask[1].borderTopWidth = i + "px";
		break;
	case 3:
		arrMask[1].pixelWidth = i;
		arrMask[1].borderLeftWidth = (33-i) + "px";
		break;
	case 4:
		arrMask[2].pixelWidth = 33 - i;
		arrMask[2].borderRightWidth = i + "px";
		break;
	case 5:
		arrMask[2].pixelHeight = i;
		arrMask[2].borderTopWidth = (33-i) + "px";
		break;
	case 6:
		arrMask[3].pixelHeight = 33 - i;
		arrMask[3].borderBottomWidth = i + "px";
		break;
	case 7:
		arrMask[3].pixelWidth = i;
		arrMask[3].borderRightWidth = (33-i) + "px";
		break;
	case 8:
		inCD = false;
		for(i=0; i<4; i++)
			arrMask[i].display = "none";
		break;
	}

if(tickID == 33)
	{
		tickID = 0;
		stage++;
	}
}
function Reset()
{
	for(var i=0; i<4; i++)
	{
		arrMask[i].display = "block";
	}

arrMask[0].pixelWidth = 0;
	arrMask[0].pixelHeight = 0;
	arrMask[0].borderLeftWidth = "0";
	arrMask[0].borderBottomWidth = "33px";
	arrMask[1].pixelWidth = 0;
	arrMask[1].pixelHeight = 0;
	arrMask[1].borderTopWidth = "0";
	arrMask[1].borderLeftWidth = "33px";
	arrMask[2].pixelWidth = 33;
	arrMask[2].pixelHeight = 0;
	arrMask[2].borderRightWidth = "0";
	arrMask[2].borderTopWidth = "33px";
	arrMask[3].pixelWidth = 0;
	arrMask[3].pixelHeight = 33;
	arrMask[3].borderBottomWidth = "0";
	arrMask[3].borderRightWidth = "33px";
}
function RenderRoutine()
{
	Draw();
}
setInterval(RenderRoutine, 16);
</script>
</body>
</html>