转盘demo - webcenterol - ITeye博客

`

webcenterol

浏览: 950968 次

最近访客更多访客>>

athena507

wyx065747

一往无前bhz

u012363178

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (1745)

社区版块

存档分类

2012-02 ( 2)
2011-11 ( 10)
2011-10 ( 112)
更多存档...

最新评论

tmpttt：你好，我也遇到了同样的问题，请问你解决了吗？求指教。
Your server IP address is in the SORBS DNSBL database
applehxb：这篇博客没写完吗？
确定Windows XP到底是UCS-2的还是UTF-16的
sunboy_2050：转载我的文章，请在“显要”位置注明出处和链接！！！其它几篇也一 ...
各种基本算法实现小结（四）—— 图及其遍历
sunboy_2050：转载我的文章，请在“显要”位置注明出处和链接！！！其它几篇也一 ...
各种基本算法实现小结（三）—— 树与二叉树
lwangivy：代码里的那个d就是什么类型?
Android: Service中创建窗口显示(TYPE_SYSTEM_ALERT, TYPE_SYSTEM_OVERLAY)

转盘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>

分享到：

素数分解之javascript实现 | Fixcel电子表单——前端动作脚本(三)：数 ...

2011-10-29 19:25
浏览 630
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

抽奖大转盘demo.zip: 这个"抽奖大转盘demo.zip"文件提供了一个基本的实现示例，适合在移动端展示。接下来，我们将深入探讨其中涉及的关键技术、原理以及实现方法。首先，我们关注的是H5（HTML5）技术。HTML5是超文本标记语言的最新版本...

幸运大转盘demo: "幸运大转盘demo"是一个典型的抽奖程序示例，它可能是用编程语言实现的一个互动界面，用户可以通过旋转转盘来参与抽奖活动。这种程序在各种活动中广泛应用，如线上促销、游戏、活动等，以增加趣味性和参与度。下面将...

jQuery 抽奖转盘demo: **jQuery 抽奖转盘Demo详解** 在网页开发中，抽奖转盘是一种常见的互动元素，常用于电商促销、游戏活动等场景。这个“jQuery 抽奖转盘demo”利用jQuery库和旋转效果（rotate）来实现一个动态且吸引用户的抽奖界面。...

jquery大转盘demo: 【jQuery大转盘Demo详解】在网页开发中，动态效果的实现往往能提升用户体验，而“大转盘”作为一种常见的互动元素，常用于抽奖、优惠券领取等场景。jQuery库以其简洁易用的API，成为了实现这类效果的首选工具。本...

ios 转盘 demo: 这个“ios 转盘 demo”提供了一个实现转盘功能的实例，包含手动转盘和自动转盘两种操作模式。下面将详细探讨相关知识点。一、转盘动画转盘动画是实现转盘效果的关键。在iOS中，可以使用Core Animation框架来创建...

抽奖大转盘demo: 在这个“抽奖大转盘demo”中，我们可以探究其核心技术和实现方式。首先，从“demo”这个词来看，这是一个演示版本或示例程序，可能包含了一个基本的抽奖大转盘功能的实现。开发者通常会创建这样的示例来展示如何在...

MaskFilter抽奖大转盘Demo: 【MaskFilter抽奖大转盘Demo】是一个以MaskFilter技术实现的互动抽奖应用示例。在Android开发中，MaskFilter是一种图形处理工具，主要用于图像或视图的遮罩效果，它可以改变视图的某些部分，使其呈现出不同的视觉...

转盘抽奖demo 转盘抽奖demo: 转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖demo转盘抽奖...

C#大转盘demo: 【C#大转盘demo】是一个基于C#编程语言实现的互动应用示例，它展示了如何在Windows平台上构建一个功能完善的交互式转盘程序。这个项目实战案例对于学习C#和游戏开发技术的开发者来说非常有帮助，尤其适合初学者理解...

微信大转盘demo: 微信大转盘Demo是一款用于创建定制化抽奖活动的应用程序，主要功能是让用户能够根据自己的需求设计和设置转盘的概率，从而实现个性化的抽奖体验。在IT行业中，这种类型的互动工具通常用于营销活动、线上游戏或者各种...

安卓抽奖转盘demo: 【安卓抽奖转盘demo】是一款专门针对Android平台开发的抽奖应用示例，它为开发者提供了一个直观、可自定义的转盘抽奖界面，用于构建各种类型的互动抽奖活动。这款demo通常用于教学目的，帮助开发者了解如何在Android...

转盘demo_CocosJS Game: 【转盘demo_CocosJS Game】是一个使用CocosJS框架开发的游戏示例，它主要展示了如何利用触摸事件和计时器来实现一个交互式的转盘功能。CocosJS是Cocos2d-x游戏引擎的一个JavaScript版本，适用于创建跨平台的2D游戏。...

大转盘demo: 【大转盘Demo】是一种利用CSS3和JavaScript技术构建的互动抽奖应用，它以其高效、动态和吸引人的视觉效果在Web开发中广泛应用。这个Demo展示了如何通过这两种强大的前端技术来创建一个模拟真实世界中常见旋转转盘的...

大转盘demo.zip: 移动端电脑端微信端都可以用的大转盘前端demo,本人修复，超简洁的大转盘前端demo，拿去直接上项目，下期分享抽奖后端通用代码

turntable:转盘demo: 【转盘Demo】是一个基于Java技术实现的互动性游戏或抽奖程序，通常用于模拟实际生活中的转盘抽奖场景。在电子商务、营销活动或者娱乐应用中，这种转盘设计可以增加用户的参与度和互动体验。本项目名为"turntable-...

IOS源码应用Demo-RoundDisk幸运大转盘旋转.zip: 【标题】"IOS源码应用Demo-RoundDisk幸运大转盘旋转.zip"是一个iOS开发相关的资源包，其中包含了一个名为"RoundDisk幸运大转盘旋转"的应用程序示例源代码。这个项目可能是一个互动式的、具有娱乐性质的轮盘应用，...

Android 幸运大转盘源码-IT计算机-毕业设计.zip: "Android 幸运大转盘源码"就是一个这样的实例，它是一个完整的Android应用项目，适用于学习和研究。这个源码提供了实现一个互动式、游戏化的界面——幸运大转盘的完整流程。首先，我们要理解Android应用的基本结构...

手机微信网页转盘抽奖示例demo: 之前公司做的一个微信中秋抽奖活动页面，这个只是前台网页和脚本，可以自己控制停的位置。后台逻辑自己写。

转盘的demo: 对于这个转盘demo，无论选择哪种语言，我们都需要熟悉面向对象编程概念，包括类、对象、属性和方法。转盘的核心在于动画效果的实现。在iOS中，我们可以利用Core Animation框架来创建复杂的视觉效果。Core ...

微信小程序精品demo：大转盘，仿天猫超市抽奖(源代码+截图): 微信小程序精品demo：大转盘，仿天猫超市抽奖(源代码+截图)微信小程序精品demo：大转盘，仿天猫超市抽奖(源代码+截图)微信小程序精品demo：大转盘，仿天猫超市抽奖(源代码+截图)微信小程序精品demo：大转盘，仿...

Global site tag (gtag.js) - Google Analytics