转盘demo

<!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>


 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值