<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function setStyle(control,obj){
for(var p in obj){
control['style'][p] = obj[p];
}
}
</script>
<script type="text/javascript">
var max_len = 5;
var real_max_len = 9;
var centerPos = {x:1000,y:300};
var R = 200;
var position = [
[centerPos.x,centerPos.y-R],
[centerPos.x+R*Math.sin(2*Math.PI/max_len),centerPos.y-R*Math.cos(2*Math.PI/max_len)],
[centerPos.x+R*Math.sin(2*2*Math.PI/max_len-Math.PI/2),centerPos.y+R*Math.sin(2*2*Math.PI/max_len-Math.PI/2)],
[centerPos.x-R*Math.sin(2*2*Math.PI/max_len-Math.PI/2),centerPos.y+R*Math.sin(2*2*Math.PI/max_len-Math.PI/2)],
[centerPos.x-R*Math.sin(2*Math.PI/max_len),centerPos.y-R*Math.cos(2*Math.PI/max_len)]
];
function setPosition(){
createDiv();
//other things
}
function createDiv(){
var temp = [];
for(var i=0;i<max_len;i++){
temp[i] = document.createElement("div");
temp[i].id = "id"+i;
document.body.appendChild(temp[i]);
setStyle(
temp[i],
{
position:"absolute",
fontSize:'36px',
color:"red",
background:"url(images/pic_"+i+".png) no-repeat",
width:"100px",
height:"200px",
border:"1px solid red",
left:position[i][0]+"px",
top:position[i][1]+"px"
}
);
}
}
var index = 0;
var realIndex = 0;
var listData = [];
var realListData = [];
function move(direction){
var _type;
if(direction==='l'){
_type = -1;
} else if(direction==='r'){
_type = 1;
} else{
_type =0;
}
//this can show that if you know one number,you can know each number from this known number;
realIndex = (realIndex+_type+real_max_len)%real_max_len;
index = (index+_type+max_len)%max_len;
for(var i=0;i<max_len;i++){
realListData[i] = (realIndex+i)%real_max_len;
//alert(realListData[i]);
}
for(var i=0;i<max_len;i++){
listData[i] = (index+i)%max_len;
}
translate(direction);
}
//not change:5个坐标位置 changing:
function translate(dir){
var angle =0;
var timer = 0;
var perStep = 0.07;//转动的幅度
timer = setInterval(
function(){
angle = angle + perStep;
if(angle>2*Math.PI/max_len){
clearInterval(timer);
(function(){
//移动结束后，重新赋值；
for(var i=0;i<max_len;i++){
//$("id"+listData[i]).innerHTML = listData[i];
}
})();
}
if(dir=='r'){
for(var i=0;i<max_len;i++){
setStyle(
$("id"+listData[i]),
{
left:(position[(i+1)%max_len][0]-centerPos.x)*(Math.cos(-angle))-(position[(i+1)%max_len][1]-centerPos.y)*(Math.sin(-angle))+centerPos.x+"px",
top:(position[(i+1)%max_len][0]-centerPos.x)*(Math.sin(-angle))+ (position[(i+1)%max_len][1]-centerPos.y)*(Math.cos(-angle))+centerPos.y+"px"
}
);
}
}
else if(dir=='l'){
for(var i=0;i<max_len;i++){
setStyle(
$("id"+listData[i]),
{
left:(position[(i-1+max_len)%max_len][0]-centerPos.x)*(Math.cos(angle))-(position[(i-1+max_len)%max_len][1]-centerPos.y)*(Math.sin(angle))+centerPos.x+"px",
top:(position[(i-1+max_len)%max_len][0]-centerPos.x)*(Math.sin(angle))+ (position[(i-1+max_len)%max_len][1]-centerPos.y)*(Math.cos(angle))+centerPos.y+"px"
}
);
}
}
},
1);
}
function skip(value){
//go to the define position
//alert(value);
index = value;
for(var i=0;i<max_len;i++){
listData[i] = (index+i)%max_len;
setStyle(
$("id"+listData[i]),
{
left:position[i][0]+"px",
top:position[i][1]+"px"
}
)
}
translate();
}
function enter(){
alert(index);
}
var onloadFlag = false;
window.onload = function main(){
setPosition();
onloadFlag = true;
};
document.onkeydown = function eventHandler(event){
if(!onloadFlag) return;
var KEY = {
LEFT:37,
RIGHT:39,
UP:38,
DOWN:40,
ENTER:13,
BACK:640
}
var keycode = event.keyCode || event.which;
switch(keycode){
case KEY.LEFT:
move("l");
break;
case KEY.RIGHT:
move("r");
break;
case KEY.UP:
move("u");
break;
case KEY.DOWN:
move("d");
break;
case KEY.ENTER:
enter();
break;
case KEY.BACK:
case 8:
case 27:
var code = parseInt(Math.random()*5);
skip(code);
break;
}
}
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
