非常非常的聪明的方法, 有创意, 五体投地
<!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实现"是两个重要的功能模块，通常用于角色扮演游戏或者策略游戏中，增强游戏的交互性和策略性。下面将详细解释这两个概念以及如何在Cocos2dx框架下实现它们。 ...
在魔兽世界等大型多人在线角色扮演游戏（MMORPG）中，玩家之间的战斗策略往往离不开对敌方技能冷却时间的精确判断。Atemi敌对姓名板技能冷却插件正是为了满足这一需求而诞生的利器，它与Tidy插件的无缝配合，极大地...
《魔兽争霸WAR3 JASS技能ID进制转换器详解及应用》 在魔兽争霸III（WAR3）的游戏世界中，地图编辑器与JASS（Just Another Scripting System）语言为玩家提供了无限的创意空间，让游戏爱好者能够自定义游戏规则、...
8. INV_Misc_MissileLargeCluster_Green.png：如果存在的话，绿色通常代表自然，可能是德鲁伊或猎人的技能效果。 这些图标不仅展示了魔兽世界中丰富的技能和装备多样性，也反映了游戏的艺术风格和设计理念。每一个...
魔兽世界3.35技能编辑器
魔兽世界版本： 3.3.5a 12340版本 文件说明：游戏中所有生物对应的技能列表（spellid,说明,提示说明） 内容取自 Data/zhCN/spell.dbc文件 还包括一些非常有趣的技能，可以通过gm命令 .learn #spellid 学习 本文件...
例如，某些英雄的技能伤害或冷却时间得到了调整，某些物品的价格或效果发生了变化，这些都可能直接影响到玩家的战术选择。此外，1.27a还增强了游戏的网络连接性能，减少了延迟和掉线情况，使得多人在线对战更加流畅...
DBC文件是魔兽世界游戏中的二进制数据库格式，存储着游戏的各种数据，如角色信息、物品、技能等。这些文件通常不易于人类阅读和编辑，而SQL（Structured Query Language）是关系型数据库的标准语言，它提供了一种...
它提供了丰富的图像编辑功能，允许用户自定义单位、技能、物品等的图标，从而为自制地图增添个性化的视觉效果。Iconshop支持导入和导出多种图像格式，包括BLP（暴雪纹理压缩格式），这是魔兽争霸3中常用的一种高效...
在魔兽世界这款大型多人在线角色扮演游戏（MMORPG）中，技能数据库包含了所有角色、怪物和NPC的技能信息，包括技能效果、冷却时间、消耗资源等关键数据。 DBC文件是魔兽世界中用来存储各种游戏数据的二进制格式，...
在设计过程中，这些魔兽图标可以作为网页元素的一部分，增强页面的视觉效果。例如，可以通过CSS将图标设置为按钮、链接或者背景，通过JavaScript实现动态交互，如鼠标悬停效果、点击切换图标等。此外，也可以利用...
js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，...
每个版本可能对游戏平衡性、单位、技能等方面有所调整，有时会造成不同玩家群体间的游戏体验差异。因此，“魔兽版本转换”工具应运而生，它允许玩家根据需要在不同的游戏版本之间进行切换。 “魔兽版本转换”工具是...
了解并掌握如何使用《魔兽争霸平台地图内装备ID提取工具》是提升魔兽争霸地图编辑技能的关键步骤之一。它不仅有助于理解游戏内部机制，还能够推动玩家创新，创建出独一无二的游戏体验。无论是为了个人娱乐还是参与...
在魔兽世界模型编辑中，翅膀是一种常见的装饰元素，常用于为角色添加额外的视觉效果或增加特殊技能的表现力。本压缩包提供的翅膀模型，可以在YDWE中加载并应用于人物模型，通过设置球体技能，实现翅膀的动态展示。...
js鼠标跟随火焰效果，漂浮丝带的火焰，魔兽既视感！ js鼠标跟随火焰效果，漂浮丝带的火焰，魔兽既视感！ js鼠标跟随火焰效果，漂浮丝带的火焰，魔兽既视感！ js鼠标跟随火焰效果，漂浮丝带的火焰，魔兽既视感！ js...
在魔兽争霸3的游戏环境中，地图编辑器允许玩家创建极具创新性的自定义地图，这些地图往往包含独特的物品、技能、科技和魔法效果。"提取魔兽非优化地图的各种id与名称.rar" 文件提供了一种方法，帮助玩家和地图制作者...
魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip 魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip 魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽...
1. **主题色彩**：借鉴魔兽世界游戏中的颜色搭配，如暗色调、金属质感和魔法效果的色彩，来营造游戏的氛围。 2. **角色与场景**：使用游戏内的角色、怪物、地图等视觉元素，通过高质量的图像和插图展示，让网页充满...
这本书籍提供了从基础知识到高级技术的详细指导，旨在帮助读者快速掌握lua语言和魔兽世界插件开发的技能。 本书籍的主要内容包括： 1. lua语言基础：本书籍首先介绍了lua语言的基础知识，包括变量、数据类型、...