<!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>test</title>
<script type="text/javascript">
/*
* Draw a Oval
* The following is the formula of Oval.
* All dots is drawn by it.
* x = r*a*cosθ (0 <= θ <= 2π)
* y = r*b*sinθ (0 <= θ <= 2π)
* b*b + r*r = a*a //Pythagoras Theorem
*/
var Circle = {
centre_of_circle : {x:200,y:200},
radius : 12,
dot : function(x,y,w){
return "<div id='dot_"+x+y+"' style='display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>";
},
draw : function(){
var s = "",
dots = 500,
a = 15,
b = 9,
dotsArr = [];
for(var i = 0; i < dots; i++){
var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a;
var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*Math.PI/dots)*b;
s += Circle.dot(x, y, 2);
dotsArr.push({"y":y,"x":x});
}
document.body.innerHTML = s;
return dotsArr;
}
}
window.onload = function(){
var dots = Circle.draw();
var count = 0;
var t = window.setInterval(function(){
document.getElementById("dot_"+dots[count].x+dots[count].y).style.display = "block";
count++;
if(count >= dots.length) window.clearInterval(t);
},1);
}
</script>
</head>
<body>
</body>
</html>
<!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>test</title>
<script type="text/javascript">
/*
* Draw a Oval
* The following is the formula of Oval.
* All dots is drawn by it.
* x = r*a*cosθ (0 <= θ <= 2π)
* y = r*b*sinθ (0 <= θ <= 2π)
* b*b + r*r = a*a //Pythagoras Theorem
*/
var Circle = {
centre_of_circle : {x:200,y:200},
radius : 12,
dot : function(x,y,w){
return "<div id='dot_"+x+y+"' style='display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>";
},
draw : function(){
var dots = 300,
a = 15,
b = 9,
dotsArr = [];
for(var i = 0; i < dots; i++){
var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a;
var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*Math.PI/dots)*b;
dotsArr.push({"y":y,"x":x});
}
return dotsArr;
},
words : function(aObjArr){
var s = "";
s += "<a href='"+aObjArr.href+"' target='_blank' style='position:absolute;' id='a_"+aObjArr.id+"'>"+aObjArr.str+"</a>";
return s;
}
}
window.onload = function(){
var dots = Circle.draw();
var count = 0;
document.body.innerHTML = Circle.words({href:"http://www.baidu.com",id:dots[count].x+""+dots[count].y,str:"baidu"});
var style = document.getElementById("a_"+dots[count].x+""+dots[count].y).style;
var t = window.setInterval(function(){
with(style){
top = dots[count].y+"px";
left = dots[count].x+"px";
fontSize = (dots[count].y/10)+"px"
}
count++;
if(count >= dots.length){
count = 0;
}
},1);
}
</script>
</head>
<body>
</body>
</html>
