[转] 魔兽技能冷却效果（绝佳思路）-CSDN博客

本文链接：https://blog.csdn.net/iteye_5974/article/details/82360604
非常非常的聪明的方法, 有创意, 五体投地

<!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"> <body> 
<style> 
.button { position:relative; width:65px; height:65px; overflow:hidden; border:3px outset #ddd; float:left; } 
.layer { position:absolute; overflow: hidden; filter: Chroma(color='black') alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity: 0.7; } 
</style> 
<script> 
//By:X!ao_f QQ:120000512 
function CoolDown(obj, time){ //定义DIV数组 
	var layers = [document.createElement('div'), document.createElement('div'), document.createElement('div'), document.createElement('div') ]; 
	//重设 
	obj.reset = function(){ 
		//附加DIV的样式 
		var styles = [ 
			{ width: '0px', height: '0px', left:'33px', top:'-33px', border: '33px solid gray', borderTop: '33px solid transparent', borderLeft: '0px solid transparent' },
			{ width: '0px', height: '0px', left:'33px', top:'33px', border: '33px solid gray', borderTop: '0px solid transparent', borderRight: '33px solid transparent' },
			{ width: '33px', height: '0px', left:'-33px', top:'33px', border: '33px solid gray', borderBottom: '33px solid transparent', borderRight: '0px solid transparent' },
			{ width: '0px', height: '33px', left:'-33px', top:'-33px', border: '33px solid gray', borderBottom: '0px solid transparent', borderLeft: '33px solid transparent' }, 
		]; 
		for(var i=0; i<4; i++){
			layers[i].className = 'layer'; 
			for(var name in styles[i]){ layers[i].style[name] = styles[i][name]; } 
			obj.appendChild(layers[i]); 
		} 
	} 
	//注册时间 
	obj.onmousedown = function(){ obj.style.border = '3px inset #ddd'; } 
	obj.onclick = function(){
		if(obj.frozen){ return; }else{ obj.reset(); obj.frozen = true; } 
		var i = 0; 
		var step = 0; //执行动画 
		var handle = setInterval(function(){
			i++; 
			switch(step){ 
				case 0: 
					layers[0].style.borderLeftWidth = i+'px'; 
					break; 
				case 1: 
					layers[0].style.height = i+'px'; 
					layers[0].style.borderBottomWidth = (33-i)+'px'; 
					break; 
				case 2: 
					layers[1].style.borderTopWidth = i+'px'; 
					break; 
				case 3: 
					layers[1].style.width = i+'px'; 
					layers[1].style.borderLeftWidth = (33-i)+'px'; 
					break; 
				case 4: 
					layers[2].style.width = (33-i)+'px'; 
					layers[2].style.borderRightWidth = i+'px'; 
					break; 
				case 5: 
					layers[2].style.height = i+'px'; 
					layers[2].style.borderTopWidth = (33-i)+'px'; 
					break; 
				case 6: 
					layers[3].style.height = (33-i)+'px'; 
					layers[3].style.borderBottomWidth = i+'px'; 
					break; 
				case 7: 
					layers[3].style.width = i+'px'; 
					layers[3].style.borderRightWidth = (33-i)+'px'; 
					break; 
			} 
			if(i==33){ i=0; step++; }
			if(step==8){ clearInterval(handle); obj.style.border = '3px outset #ddd'; obj.frozen = false; } 
		}, time/300); 
	} 
}
window.onload=function(){ 
	if(document.all){ document.execCommand("BackgroundImageCache", false, true); } 
	CoolDown(document.getElementById('btn1'), 1000); 
	CoolDown(document.getElementById('btn2'), 2000); 
	CoolDown(document.getElementById('btn3'), 4000); 
	CoolDown(document.getElementById('btn4'), 8000); 
}
</script> 

<div style="border:solid 33px #999;border-left:solid 10px #999; width:5px;height:5px; opacity: 0.7;"></div>


<div id="btn1" class="button" style="background:url(http://www.etherdream.com/funnyscript/WarIcon/Icon1.PNG);"></div> 
<div id="btn2" class="button" style="background:url(http://www.etherdream.com/funnyscript/WarIcon/Icon1.PNG);"></div> 
<div id="btn3" class="button" style="background:url(http://www.etherdream.com/funnyscript/WarIcon/Icon1.PNG);"></div> 
<div id="btn4" class="button" style="background:url(http://www.etherdream.com/funnyscript/WarIcon/Icon1.PNG);"></div> 
</body>
</html>