非常非常的聪明的方法, 有创意, 五体投地
<!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>
分享到:
相关推荐
cocos2dx 下实现 表情气泡&仿魔兽的转技能CD实现 http://blog.csdn.net/goodeveningbaby/article/details/43585907
war3 JASS技能ID进制转换器 能对JASS的技能ID进制进行转换 常用与 DOTA JASS 技能ID转换等等
魔兽世界图标大全,各式技能图片,装备图片,等等等等,应有尽有,走过路过不要错过
魔兽世界版本: 3.3.5a 12340版本 文件说明:游戏中所有生物对应的技能列表(spellid,说明,提示说明) 内容取自 Data/zhCN/spell.dbc文件 还包括一些非常有趣的技能,可以通过gm命令 .learn #spellid 学习 本文件...
js炫酷网格墙,魔兽视觉效果,前端小白必看! js炫酷网格墙,魔兽视觉效果,前端小白必看! js炫酷网格墙,魔兽视觉效果,前端小白必看! js炫酷网格墙,魔兽视觉效果,前端小白必看! js炫酷网格墙,魔兽视觉效果,...
魔兽版本转换,冰封王座版本转换,war3版本转换 魔兽各个版本之间的自由切换 放在魔兽安装目录下,双击使用
精美魔兽图标43个,强烈推荐,喜欢魔兽的朋友别错过了~~
魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip 魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip 魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽...
魔兽火影全集模型Warcraft 3 Iconshop Final & BLP Convertion Spirit
js鼠标跟随火焰效果,漂浮丝带的火焰,魔兽既视感! js鼠标跟随火焰效果,漂浮丝带的火焰,魔兽既视感! js鼠标跟随火焰效果,漂浮丝带的火焰,魔兽既视感! js鼠标跟随火焰效果,漂浮丝带的火焰,魔兽既视感! js...
魔兽地图X Hero Siege 3.16[CN]技能加强版
魔兽世界单机的数据库的表名注释,数据库的注释 玩单机的人用的
这个是魔兽争霸的版本转换器 已经支持1.27a版本了 。本软件是第三方软件下载的。完全免费!
设定次数number,ctri c复制一项数据,鼠标单击到要粘贴的行上,按快捷键开始就行了
E.M 2D游戏开发引擎,上手容易轻松打造属于自己的游戏世界
大芒果_魔兽世界_mysql_数据库_详解.docx
用于魔兽争霸3之冰封王座(War3)游戏、魔兽地图编辑器插件YDWE 动漫《犬夜叉》男猪脚模型下载 .mdx和.blp格式
魔兽ID提取器是用来提取魔兽争霸地图中的单位、技能、物品等信息并生成可视化网页文件的软件,只支持slk优化过的地图,代码用C++编写,编译环境VC6,仅供学习参考
魔兽世界网站WoWFailureCMS
魔兽各类源码SVN地址魔兽各类源码SVN地址魔兽各类源码SVN地址魔兽各类源码SVN地址魔兽各类源码SVN地址