非常非常的聪明的方法, 有创意, 五体投地
<!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.3.5a 12340版本 文件说明：游戏中所有生物对应的技能列表（spellid,说明,提示说明） 内容取自 Data/zhCN/spell.dbc文件 还包括一些非常有趣的技能，可以通过gm命令 .learn #spellid 学习 本文件...
例如，某些英雄的技能伤害或冷却时间得到了调整，某些物品的价格或效果发生了变化，这些都可能直接影响到玩家的战术选择。此外，1.27a还增强了游戏的网络连接性能，减少了延迟和掉线情况，使得多人在线对战更加流畅...
它提供了丰富的图像编辑功能，允许用户自定义单位、技能、物品等的图标，从而为自制地图增添个性化的视觉效果。Iconshop支持导入和导出多种图像格式，包括BLP（暴雪纹理压缩格式），这是魔兽争霸3中常用的一种高效...
在设计过程中，这些魔兽图标可以作为网页元素的一部分，增强页面的视觉效果。例如，可以通过CSS将图标设置为按钮、链接或者背景，通过JavaScript实现动态交互，如鼠标悬停效果、点击切换图标等。此外，也可以利用...
在魔兽世界这款大型多人在线角色扮演游戏（MMORPG）中，技能数据库包含了所有角色、怪物和NPC的技能信息，包括技能效果、冷却时间、消耗资源等关键数据。 DBC文件是魔兽世界中用来存储各种游戏数据的二进制格式，...
js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，前端小白必看！ js炫酷网格墙，魔兽视觉效果，...
每个版本可能对游戏平衡性、单位、技能等方面有所调整，有时会造成不同玩家群体间的游戏体验差异。因此，“魔兽版本转换”工具应运而生，它允许玩家根据需要在不同的游戏版本之间进行切换。 “魔兽版本转换”工具是...
魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip 魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip 魔兽地图格式转换工具.zip魔兽地图格式转换工具.zip魔兽...
在魔兽世界模型编辑中，翅膀是一种常见的装饰元素，常用于为角色添加额外的视觉效果或增加特殊技能的表现力。本压缩包提供的翅膀模型，可以在YDWE中加载并应用于人物模型，通过设置球体技能，实现翅膀的动态展示。...
魔兽世界3.35技能编辑器
在魔兽争霸3的游戏环境中，地图编辑器允许玩家创建极具创新性的自定义地图，这些地图往往包含独特的物品、技能、科技和魔法效果。"提取魔兽非优化地图的各种id与名称.rar" 文件提供了一种方法，帮助玩家和地图制作者...
1. **主题色彩**：借鉴魔兽世界游戏中的颜色搭配，如暗色调、金属质感和魔法效果的色彩，来营造游戏的氛围。 2. **角色与场景**：使用游戏内的角色、怪物、地图等视觉元素，通过高质量的图像和插图展示，让网页充满...
这本书籍提供了从基础知识到高级技术的详细指导，旨在帮助读者快速掌握lua语言和魔兽世界插件开发的技能。 本书籍的主要内容包括： 1. lua语言基础：本书籍首先介绍了lua语言的基础知识，包括变量、数据类型、...
在魔兽争霸3的游戏机制中，每个物品都有一个唯一的ID，它决定了物品的属性、效果以及在游戏中的表现。例如，恢复药水的ID是0x0C2，而大恶魔之剑的ID则是0x1F6。这些ID在地图编辑器中被用于创建自定义游戏时设置物品...
此外，源码中的技能代码展示了如何实现复杂的技能效果，如范围伤害、控制效果、状态增益等。 四、地图元素与资源管理 源码中还包括了对地图元素的管理，如资源点的分布、建筑的设置等。在“真三”中，玩家需要收集...
《魔兽模型查看器》是一款专为魔兽争霸III（Warcraft III）设计的模型编辑与查看软件，它极大地拓展了玩家和地图制作者在游戏内的视觉表现力和创意空间。这款工具能够帮助用户深入理解并调整游戏中的单位、建筑、...