当前位置：首页 -> 技术开发 -> Script -> Javascirpt打造“互动指针”特效

Javascirpt打造“互动指针”特效

时间： 2021-07-31 作者：daque

一个很不错的功效，用键盘的箭镞键遏制一个美丽的箭镞！大概能给你开辟，做出一款风趣的小游戏呢！运转代码框<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 十足采用提醒：你可先窜改局部代码，再按运转]（根源：蓝色理念）

Javascirpt打造“互动指针”特效

相关推荐

推荐下载

热门阅览

最新排行