`
wang_zhi_peng2007
  • 浏览: 241899 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript版的简单动画

 
阅读更多

       Google+中有一个特效：拖拽用户头像至分组内，用户头像会有一个特效（绕着圆圈转一圈）。写了个简单的示例，效果如下图所示：



    javaScript 动画代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>~ ~</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/html; charset=utf-8' />
  <style type='text/css'>
   * {margin:0; padding:0;}
   .m {position:absolute; width:1px; height:1px; z-index:1; background-color:#3399cc}
   .move {width:30px; height:30px; position:absolute; background-color:#da4936; z-index:999; border-radius:25px;}
   .h {width:800px; position:absolute; border-top:1px solid #323232; top:300px; left:0px; z-index:9;}
   .v {height:800px; border-left:1px solid #323232; left:300px; top:0; z-index:10; position:absolute;}

   #btn {margin:100px;}
  </style>
 </head>

 <body>

<button id="btn">开始运动</button>
<div class="move" id="modelEl"></div>

<div class="h"></div>
<div class="v"></div>

<div>
	步长：<select id='sel'>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="5">5</option>
		<option value="8">8</option>
		<option value="10">10</option>
		<option value="15">15</option>
		<option value="20">20</option>
		<option value="30">30</option>
	</select>
</div>

<script type="text/javascript">
//1度＝π/180 弧度 ( ≈0.017453弧度 ) 

!(function() {
	for (var i = 0; i < 360; i+=1) {
		var r = 200;
		var x0 = 300;
		var y0 = 300;

		var angle = Math.PI * i / 180;
		var x = Math.cos(angle) * r + x0;
		var y = Math.sin(angle) * r + y0;

		document.write('<div class="m" style="left:'+x+'px; top:'+y+'px;"></div>');

		r = 170;
		x = Math.cos(angle) * r + x0;
		y = Math.sin(angle) * r + y0;
		document.write('<div class="m" style="left:'+x+'px; top:'+y+'px;"></div>');
	}
})();

function getEl(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}

getEl("btn").onclick = moveHandler;

function movePos(n) {
	var el = getEl("modelEl");

	var r = 185;
	var x0 = 300;
	var y0 = 300;

	var angle = Math.PI * n / 180;
	var x = Math.cos(angle) * r + x0 - el.offsetWidth/2;
	var y = Math.sin(angle) * r + y0 - el.offsetHeight/2;

	el.style.left = x + 'px';
	el.style.top = y + 'px';
}

movePos(270);

function transform(A) {
	return 1 - Math.pow(1 - A, 3);
}

function moveHandler() {
	var base = 270;
	var step = getEl('sel').value | 0;
	var start = 360;
	var end = 0;

	getEl("btn").disabled = true;
	
	var timer = setInterval(function() {		
		if (start >= end) {
			movePos(base + start);
			start -= step;

			step += transform((start - end)/360) / 100;
		} else {
			movePos(base + end);
			
			clearInterval(timer);

			if (moveHandler.count < 10) {
				moveHandler.count++;
				
				setTimeout(function() {
					getEl("sel").selectedIndex = Math.random() * getEl("sel").options.length | 0;

					moveHandler();
				}, 100);
			} else {
				moveHandler.count = 0;
				getEl("btn").disabled = false;
			}
			
		}
	}, 1);
}

moveHandler.count = 0;

</script>
 </body>
</html>

 

 

  • 大小: 27.4 KB
分享到：
| Oracle_INSTR函数使用
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics