Javascirpt打造“互动指针”特效

来源：互联网发布：全铝合金拉杆箱知乎编辑：程序博客网时间：2024/05/16 06:27

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

运行代码框
<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>Interactive Arrow</title><STYLE>v/:* { BEHAVIOR: url(#default#VML) }</STYLE><SCRIPT Language="JavaScript">/*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));}function MoveIt(){var the_top = parseInt(angle.style.top);var the_left = parseInt(angle.style.left);angle.style.top = the_top + move_y;angle.style.left = the_left + move_x;if(the_top < 0 || the_top > document.body.offsetHeight){angle.Rotation= 180 - angle.Rotation;move_y= -move_y;angle.style.top= the_top<0 ? 0 : document.body.offsetHeight + move_y;}if(the_left < 0 || the_left > document.body.offsetWidth){angle.Rotation = 360 - angle.Rotation;move_x = -move_x;angle.style.left = the_left<0 ? 0 : document.body.offsetWidth + move_x;}}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: //lefttimer = setInterval("angle.Rotation -= A_speed",time_unit);break;case 39: //righttimer = setInterval("angle.Rotation += A_speed",time_unit);break;case 40: //downthe_angle += Math.PI;case 38: //upmove_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();}document.onmousewheel = function(){if (event.wheelDelta >= 120){angle.style.width = Math.ceil(parseInt(angle.style.width) * 1.1);angle.style.height = Math.ceil(parseInt(angle.style.height) * 1.1);}else if (event.wheelDelta <= -120){angle.style.width = Math.ceil(parseInt(angle.style.width) * 0.9);angle.style.height = Math.ceil(parseInt(angle.style.height) * 0.9);}return;}window.onload = function(){setInterval("window.status='Rotation: '+angle.Rotation+'; Top: '+angle.style.top+'; Left: '+angle.style.left",time_unit);}</SCRIPT></head><body scroll="no"><v:group id="angle" style='position:absolute;top:0;left:0;width:20;height:20;z-index:999' coordorigin="-10,-10" coordsize="20,20"><v:shape CoordOrig="-10,-10" CoordSize="20,20" style="width:20;height:20" Title="Interactive Arrow" FillColor="red" Filled="true" StrokeColor="black" StrokeWeight="1pt"><v:Stroke StrokeColor="black" StrokeWeight="1pt" /><v:fill id=fill type='gradient' color='blue'/><v:Path v="m 0,-10 l -10,10 l 0,5 l 10,10 x e" /></v:shape></v:group></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]