Javascirpt打造“互動指標”特效

來源:互聯網
上載者:User
特效|指標

一個很不錯的效果,用鍵盤的方向鍵控制一個漂亮的箭頭!也許能給你啟發,做出一款有趣的小遊戲呢

<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);
 }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>

<style>a:hover{color:#036;}</style><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><div><a href="##">滑鼠移到這裡觀看效果</a></div>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。