百度的变形金刚

简化了下百度的代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>w3cfuns </title>
</head>
<body>
<div id="center"></div>
<script>
		var myCenter = document.getElementById("center");
		function createTable(str)
		{
			var myTable = document.createElement("table");
			var myTr = document.createElement("tr");
			var myTd = document.createElement("td");
			
			myCenter.appendChild(myTable);
			myTable.appendChild(myTr);
			myTr.appendChild(myTd);
			myTd.setAttribute("class", "f");
			myTd.style.color = "#" + parseInt(Math.random()*0xffffff).toString(16);
			myTd.style.backgroundColor = "#" + parseInt(Math.random()*0xffffff).toString(16);
			myTd.innerHTML = str;	
		}
		for(var i = 0; i < 10; i ++)
		{
			createTable("HELLO W3CFUNS<br>HAHAHAHAHAHAHAHAHA<br>WHAT ARE YOU DOING");
		}
		
		createTable("");	
</script>
<script src="http://img.baidu.com/img/iknow/static/transformers.js" type="text/javascript"></script>
</body>
</html>

主要是操纵类为f的td，transformers.js里有动画的坐标来控制移动

预览地址 http://06wjin.sinaapp.com//html5/baidu/

posted on 2011-07-20 20:11 达芬阅读(862) 评论(1) 收藏举报