javascirpt打造“互动指针”特效

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

运行代码框
<<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a> <a href="/list/xml/index.html" title="xml" target="_blank"><acronym>xml</acronym></a>ns:v="urn:schemas-microsoft-com:vml"><head><title>interactive arrow</title><style> v\:* { behavior: url(#default#vml) }</style><script language="<a href="/list/javascript/index.html" title="javascript" target="_blank"><acronym>javascript</acronym></a>">/*all files are designed & writen by windy_sk, you can use it freely but ...you must keep this item !email: seasonx@163<a href="/list/net/index.html" title=".net" target="_blank"><acronym>.net</acronym></a>*/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: //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();}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></<a href="/list/html/index.html" title="html" target="_blank"><acronym>html</acronym></a>>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

ICP备案编号:粤ICP备06052964号

www.sosof.com

选择显示字体大小

javascirpt打造“互动指针”特效

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准网站致力的规范

www.sosof.com

选择显示字体大小

javascirpt打造“互动指针”特效

shouchang();

关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

SQL数据库相关

手机无线相关

网页设计制作相关

网站建设推广相关

操作系统/服务器相关

图形图像多媒体相关

标准 网站致力的规范

关键字本文所属关键字

相关与本文相关文章

分类所有文章关键字导航

标准网站致力的规范