87,910
社区成员
发帖
与我相关
我的任务
分享【原创】魔兽技能冷却效果（绝佳思路）
看到论坛有人提出这个问题，挺感兴趣就研究了一下，最后找到了一个绝佳的解决方法，经过测试，通过控制DIV的border、width、height何以得到任意角度的直角三角形，这样将四个DIV拼到一起，再通过js精确的控制就完美的实现了这个效果。
中间遇到一个难点，想得到三角形就必须将一个边框设为透明，然而IE6下的border不支持transparent，还好最后通过Chroma滤镜解决了。
程序在IE67\FF\OP\Chrome\Safari下测试通过，代码见下：
中间遇到一个难点，想得到三角形就必须将一个边框设为透明，然而IE6下的border不支持transparent，还好最后通过Chroma滤镜解决了。
程序在IE67\FF\OP\Chrome\Safari下测试通过，代码见下：
<!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 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>
...全文
请发表友善的回复…
发表回复
abirdtofly 2012-04-17
- 打赏
- 举报
这个不错！要顶
Ellan1986 2010-08-26
- 打赏
- 举报
效果挺好的！
LastJune 2010-08-26
- 打赏
- 举报
Mark!学习
sky54521 2010-08-24
- 打赏
- 举报
niubbbbbbbbbbbbbbbbbbbb
huangsy1412 2010-08-23
- 打赏
- 举报
三楼的不错，只是有点一跳跳的感觉，楼主的比较流畅
etherdream 2010-08-23
- 打赏
- 举报
不错不错。这个最完美啦！
当初也想过用边框角拼扇形，不过透明问题没解决放弃。IE还有不少滤镜确是没研究过啊
当初也想过用边框角拼扇形，不过透明问题没解决放弃。IE还有不少滤镜确是没研究过啊
xingjibing 2010-08-23
- 打赏
- 举报
关注中
Crazywa 2010-08-23
- 打赏
- 举报
很好，很强大啊。
dugupiaoyun 2010-08-23
- 打赏
- 举报
我把时间给你调了下，现在基本上对得上时间了。呵呵，但是越慢的话，效果没以前的好了貌似。
<!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+=10;
switch(step){
case 0:
if (30-i==0)
layers[0].style.borderLeftWidth = '33px';
else
layers[0].style.borderLeftWidth = i+'px';
break;
case 1:
layers[0].style.borderBottomWidth = (30-i)+'px';
layers[0].style.height = i+'px';
break;
case 2:
if (30-i==0)
layers[1].style.borderTopWidth = '33px';
else
layers[1].style.borderTopWidth = i+'px';
break;
case 3:
layers[1].style.width = i+'px';
layers[1].style.borderLeftWidth = (30-i)+'px';
break;
case 4:
layers[2].style.width = (30-i)+'px';
layers[2].style.borderRightWidth = i+'px';
break;
case 5:
layers[2].style.height = i+'px';
layers[2].style.borderTopWidth = (30-i)+'px';
break;
case 6:
layers[3].style.height = (30-i)+'px';
layers[3].style.borderBottomWidth = i+'px';
break;
case 7:
layers[3].style.width = i+'px';
layers[3].style.borderRightWidth = (30-i)+'px';
break;
}
if(i==30){
i=0;
step++;
}
if(step==8){
clearInterval(handle);
obj.style.border = '3px outset #ddd';
obj.frozen = false;
}
}, time/40);
}
}
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'), 3000);
CoolDown(document.getElementById('btn4'), 4000);
}
</script>
<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>
aasddsasda 2010-08-23
- 打赏
- 举报
这里只演示效果，时间非常不好控制，也没时间做了，现在转一圈需要走264步，如果按1秒钟算也就是3.7毫秒就要计算一次，setInterval执行一个空函数都无法达到这个速度，准确控制需要动态跳帧，很复杂。
dugupiaoyun 2010-08-23
- 打赏
- 举报
不过你那个速度跟不上啊，1秒的话绝对不止1秒，貌似time参数传1000进去，CD确是5秒的样子
V-Far 2010-08-23
- 打赏
- 举报
CoolDown(document.getElementById('btn1'), 500);
CoolDown(document.getElementById('btn2'), 1000);
测试了一下.基本一致
CoolDown(document.getElementById('btn2'), 1000);
测试了一下.基本一致
iopzxc 2010-08-23
- 打赏
- 举报
有些看不太懂 注释详细点就好了。呵呵。
aasddsasda 2010-08-23
- 打赏
- 举报
[Quote=引用 3 楼 dugupiaoyun 的回复:]
我把时间给你调了下，现在基本上对得上时间了。呵呵，但是越慢的话，效果没以前的好了貌似。
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h……
[/Quote]
如果要完美的解决这个问题，要根据总时间和每一步执行时间来动态的调整步长
我把时间给你调了下，现在基本上对得上时间了。呵呵，但是越慢的话，效果没以前的好了貌似。
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h……
[/Quote]
如果要完美的解决这个问题，要根据总时间和每一步执行时间来动态的调整步长
