椭圆曲线

*{margin:0px;padding:0px;}

div{border:1px solid #111;}

.points{width:1px;height:1px;border:0px solid #111;

position:absolute;

line-height:1px;font-size:1px;

background:#111;}

.go-oval{width:10px;height:10px;border:0px solid #111;

position:absolute;

line-height:1px;font-size:1px;

background:#111;

border-radius:5px;

}

(function(){

function $(idd){

var obj = {};

if( typeof( idd ) === 'string'){

var idName = idd.substr(1, idd.length );

if( idd.substr(0,1) === '#' ){

obj = document.getElementById(idName);

}

else if( idd.substr(0,1) === '.'){

obj = document.getElementsByName(idName);

}

else if( idd == 'document' ){

obj = document;

}

else {

obj = document.getElementsByTagName(idd);

//alert(idd)

}

}

else {

obj = idd;

}

return obj;

}

//生成椭圆曲线的点(数组)

function make_points(a, b, interval, addX, addY){

var x,y;

var xy = [],xy1 = [],xy2 = [];

addX = addX ? addX : a;

addY = addY ? addY : b;

x = - Math.sqrt( (b*b)*a*a/(b*b) );

for(var n = 0; 1; n ++){

y = Math.sqrt( b*b - (b*b*x*x)/(a*a) );

if( n == 0 ){

y0 = y;

}

xy1[n] = [x + addX,y + addY];

xy2[n] = [x + addX,-y + addY];

x = x + interval;

if( x > Math.sqrt( (b*b)*a*a/(b*b) ) ){

break;

}

}

//xy2倒序

for(var n = 0, n2 = len = xy2.length - 1 ; n <= len; n ++, n2--){

xy[n] = xy2[n2];

}

xy = xy1.concat(xy);

return xy;

}

//画椭圆曲线

function draw_oval(points){

var len = points.length;

var divs = '';

for(var n = 0; n < len; n ++){

divs += '

}

return divs;

}

//沿着曲线跑动

function go_oval(idd,points, n, t, addX, addY){

var len = points.length;

n = n ? n : 0;

t = t ? t : 10;

addX = addX ? addX : 0;

addY = addY ? addY : 0;

var $obj = $(idd).style;

$obj.left = points[n][0] + addX + 'px';

$obj.top = points[n][1] + addY + 'px';

n ++;

n = n == len ? 0 : n;

setTimeout(function(){

go_oval(idd, points, n, t, addX, addY);

},t);

}

window.onload = function(){

var points1 = make_points(50,100,1,200,200);

var points2 = make_points(200,100,1);

//画椭圆曲线

$('#tuoyuan1').innerHTML = draw_oval( points1 );

$('#tuoyuan2').innerHTML = draw_oval( points2 );

//alert( make_points(200,100,3) )

//小点在曲线上跑动

go_oval('#go-oval1',points1,0,10 ,-5,-5);

go_oval('#go-oval2',points2,0,10 ,-5,-5);

};

})();