当前页面: 开发资料首页 → Javascript 专题 → Javascirpt打造“互动指针”特效

Javascirpt打造“互动指针”特效

摘要: Javascirpt打造“互动指针”特效

一个很不错的效果，用键盘的箭头键控制一个漂亮的箭头！也许能给你启发，做出一款有趣的小游戏呢

<head>

Interactive Arrow

/*
All Files are Designed & Writen by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email: seasonx@163.net
*/

var timer = null;
var time_unit = 30;
var A_speed = 10;
var L_speed = 15;
var move_x, move_y;

function ArrowStyle(type,color,color2,focus){
if(color == "") color = "white";
if(color2 == "") color2 = "white";
this.type = type;
this.color = color;
this.color2 = color2;
this.focus = focus;
}

var style_list = new Array();
style_list[style_list.length] = new ArrowStyle("gradient","blue","","");
style_list[style_list.length] = new ArrowStyle("gradient","","blue","");
style_list[style_list.length] = new ArrowStyle("gradient","blue","red","");
style_list[style_list.length] = new ArrowStyle("gradient","red","blue","");
style_list[style_list.length] = new ArrowStyle("gradient","blue","red","50%");
style_list[style_list.length] = new ArrowStyle("gradient","red","blue","-50%");
style_list[style_list.length] = new ArrowStyle("gradientradial","","blue","");
style_list[style_list.length] = new ArrowStyle("gradientradial","blue","","");
style_list[style_list.length] = new ArrowStyle("gradientradial","red","blue","");
style_list[style_list.length] = new ArrowStyle("gradientradial","blue","red","");
style_list[style_list.length] = new ArrowStyle("gradientradial","red","blue","50%");
style_list[style_list.length] = new ArrowStyle("gradientradial","blue","red","-50%");

function ChangeStyle(){
if(style_list.length == 0) return;
var the_style = style_list[GetRandomNum(1,style_list.length) - 1];
fill.type = the_style.type;
fill.color = the_style.color;
fill.color2 = the_style.color2;
fill.focus = the_style.focus;
}

/*
function ChangeStyle(){
fill.type = GetRandomNum(0,1)?"gradient":"gradientradial";
fill.color = GetRandomdColor();
fill.color2 = GetRandomdColor();
fill.focus = GetRandomNum(0,1)?"+":"-" + GetRandomNum(0,100).toString() + "%";
}

function GetRandomdColor(){
var result = "";
var hex = new Array(6);
hex[0] = "FF";
hex[1] = "CC";
hex[2] = "99";
hex[3] = "66";
hex[4] = "33";
hex[5] = "00";
for(var i=0;i<3;i++){
result += hex[GetRandomNum(0,5)];
}
return result;
}
*/

function GetRandomNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}

document.onkeydown = function(){
angle.Rotation = angle.Rotation % 360;
if(timer!=null) return;
var the_angle = Math.PI * angle.Rotation / 180;
switch(event.keyCode){
case 37: //left
timer = setInterval("angle.Rotation -= A_speed",time_unit);
break;
case 39: //right
timer = setInterval("angle.Rotation += A_speed",time_unit);
break;
case 40: //down
the_angle += Math.PI;
case 38: //up
move_y = -Math.floor(L_speed * Math.cos(the_angle));
move_x = +Math.floor(L_speed * Math.sin(the_angle));
timer = setInterval("MoveIt()",time_unit);
break;
}
return;
}

document.onkeyup = function(){
if(timer!=null) clearInterval(timer);
timer = null;
}

document.onclick = function(){
ChangeStyle();
}

window.onload = function(){
setInterval("window.status='Rotation: '+angle.Rotation+'; Top: '+angle.style.top+'; Left: '+angle.style.left",time_unit);
}

</script>

</head>
<body scroll="no">

</body>

<textarea class=fm id=code5 rows=12 cols=78> <script language="javascript"> var rate = 20; var obj; var act = 0; var elmH = 0; var elmS = 128; var elmV = 255; var clrOrg; var TimerID; if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) { Browser = true; } else { Browser = false; } if (Browser) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } function doRainbow() { if (Browser && act != 1) { act = 1; obj = event.srcElement; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (Browser && act != 0) { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (Browser && act != 1) { obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (Browser && act != 0) { if (obj.tagName == 'A') { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { obj.style.color = makeColor(); } function makeColor() { if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR); elmG = Math.floor(elmG); elmB = Math.floor(elmB); clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16); elmH = elmH + rate; if (elmH >= 360) elmH = 0; return clrRGB; } </script>

鼠标移到这里观看效果

</textarea>

<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code5')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code5) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code5) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

</td> </tr> </table>
↑返回目录
前一篇: 控制你的弹出窗口只弹出一次
后一篇: 浅谈在网页上显示日期的两种方法