一个很不错的效果，用键盘的箭头键控制一个漂亮的箭头！也许能给你启发，做出一款有趣的小游戏呢
<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: //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);
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
