脚本说明:

把如下代码加入<body>区域中

<script type="text/javascript">

function Path() {

this.concat = int_concat;

this.add = int_add;

this.rotate = int_rot;

function int_concat(p) {

return new PathList(new Array(this, p));

}

function int_add(p) {

return new PathAdd(this, p);

}

function int_rot(xc,yc,v) {

return new RotatePath(this, xc, yc, v);

}

}



// The following object is used for the concat

function PathList(inPathList) {

// All path objects must have these 5 methods

this.x  = 0;// Retrieves the current x value

this.y  = 0;

this.step = int_step;// Move to next step

this.reset = int_reset;// Resets the current position


// The rest may vary from different path objects


this.pathList = inPathList;

this.currentPath = 0;


function int_step() {

if (this.currentPath >= this.pathList.length) return false;

if (this.pathList[this.currentPath].step()) {

this.x = this.pathList[this.currentPath].x;

this.y = this.pathList[this.currentPath].y;

}

else {

this.currentPath++;

if (this.currentPath >= this.pathList.length) return false;

this.x = this.pathList[this.currentPath].x;

this.y = this.pathList[this.currentPath].y;

}

return true;

}

function int_reset() {

this.currentPath = 0;

for (var i=0; i<this.pathList.length; i++)

this.pathList[i].reset();

this.x = this.pathList[this.currentPath].x;

this.y = this.pathList[this.currentPath].y;

}

}



// The following object is used for adding two paths

function PathAdd(p1,p2) {

// All path objects must have these 5 methods

this.x  = 0;// Retrieves the current x value

this.y  = 0;

this.step = int_step;// Move to next step

this.reset = int_reset;// Resets the current position


// The rest may vary from different path objects



this._p1 = p1;

this._p2 = p2;

function int_step() {

var c1 = this._p1.step();

var c2 = this._p2.step();


this.x = this._p1.x + this._p2.x;

this.y = this._p1.y + this._p2.y;


return (c1 || c2);

}

function int_reset() {

this._p1.reset();

this._p2.reset();


this.x = this._p1.x + this._p2.x;

this.y = this._p1.y + this._p1.y;

}

}


function RotatePath(p,xc,yc,v) {

this.x  = 0;// Retrieves the current x value

this.y  = 0;

this.step = int_step;// Move to next step

this.reset = int_reset;// Resets the current position



// The rest may vary from different path objects


this._p = p;

this._xc = xc;

this._yc = yc;

this._v = v;

function int_step() {

var c = this._p.step();


var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);

var rec = toRec(pol.r, pol.v + toRad(this._v));


this.x = rec.x + this._xc;

this.y = rec.y + this._yc;


return c;

}

function int_reset() {

this._p.reset();

var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);

var rec = toRec(pol.r, pol.v + toRad(this._v));


this.x = rec.x - this._xc;

this.y = rec.y - this._yc;

}


function toPol(x,y) {

var o = new Object();

o.r = Math.sqrt(x*x + y*y);

if (x == 0)

o.v = Math.PI / 2;

else

o.v = Math.atan(y/x);

if (x < 0)

o.v = o.v + Math.PI;

return o;

}

function toRec(r,v) {

var o = new Object();

o.x = r * Math.cos(v);

o.y = r * Math.sin(v);

return o;

}


function toRad(deg) {

return deg*Math.PI/180;

}

}


PathAdd.prototype    = new Path;

PathList.prototype   = new Path;

RotatePath.prototype = new Path;

</script>

<script type="text/javascript">

function CirclePath(x, y, _xr, _yr, fromV, toV, n) {

// All path objects must have these 5 methods

this.x  = 0;// Retrieves the current x value

this.y  = 0;

this.step = int_step;// Move to next step

this.reset = int_reset;


// The rest may vary from different path objects


this.steps = n;// NN work around. NN can't handle local variables!!!

this.stepsLeft = n;

this.xp = x;

this.yp = y;

this.v = -toRad(fromV);

this.startV = this.v;

this.endV = -toRad(toV);

this.xr = _xr;

this.yr = _yr;

this.x = getX(this.xp,this.xr,this.v);

this.y = getY(this.yp,this.yr,this.v);


function toRad(deg) {

return deg*Math.PI/180;

}

function getX(xp, xr, v) {

//alert("xp: " + xp + "\nxr: " + xr + "\nv: " + v);

return xp + xr*Math.cos(v);

}


function getY(yp, yr, v) {

return yp + yr*Math.sin(v);

}


// Initate steps

if (this.steps > 0)

this.deltaV = (this.endV - this.startV)/n;// work around netscape bug. Netscape couldn't handle this

else {// as a local variable

this.deltaV = 0;

this.x = getX(this.xp,this.xr,this.endV);

this.y = getY(this.yp,this.yr,this.endV);

}

function int_step() {

if (this.stepsLeft > 0) {

this.v += this.deltaV;

this.x = getX(this.xp,this.xr,this.v);

this.y = getY(this.yp,this.yr,this.v);


this.stepsLeft--;

return true;

}

return false;

}

function int_reset() {

if (this.steps < 1) {

this.x = getX(this.xp,this.xr,this.endV);

this.y = getY(this.yp,this.yr,this.endV);

}

else {

this.v = this.startV;

this.x = getX(this.xp,this.xr,this.v);

this.y = getY(this.yp,this.yr,this.v);

this.stepsLeft = this.steps;

}

}

}


CirclePath.prototype = new Path;

</script>

<script type="text/javascript">

function StraightPath(fromX, fromY, toX, toY, n) {

// All path objects must have these 5 methods

this.x  = fromX;// Retrieves the current x value

this.y  = fromY;

this.step = int_step;// Move to next step

// Returns true if the step was succesfull

// Returns false when the path has been done

this.reset = int_reset;

// The rest may vary from different path objects


this.startX = fromX;

this.startY = fromY;

this.endX = toX;

this.endY = toY;


// Initiate steps

this.steps = n;

this.totalSteps = n;

if (this.totalSteps < 1) {// No Amimation!

this.x = this.endX;

this.y = this.endY;

this.deltaX = 0;// NN work around

this.deltaY = 0;

}

else {

this.deltaX = (this.endX - this.startX) / this.totalSteps;

this.deltaY = (this.endY - this.startY) / this.totalSteps;

}


function int_step() {

if (this.steps >= 0) {

this.steps--;

this.x += this.deltaX;

this.y += this.deltaY;

}

return (this.steps >= 0 );

}

function int_reset() {

if (this.totalSteps < 1) {

this.steps = 0;

this.x = this.endX;

this.y = this.endY;

}

else {

this.steps = this.totalSteps;

this.x = this.startX;

this.y = this.startY;

}

}

}


StraightPath.prototype = new Path;

</script>

<script type="text/javascript">

var animIndex = 0;

var animArray = new Array();


function Animator(id, p, period) {

this.play = int_play;

this.pause = int_pause;

this.stop = int_stop;

this.onanimationdone;

this.elstyle = null;

this.path = p;

this.msec = period;

this.id = id;

this.index = animIndex;

animArray[this.index] = this;

this.thisString = "animArray[" + this.index + "]";

animIndex++;

function int_play() {

if (this.elstyle == null) {

//this.elstyle = (document.all != null) ? document.all[this.id].style : document.layers[this.id];

if (document.all)// IE4

this.elstyle = document.all[this.id].style;

else if (document.getElementById)// NGLayout

this.elstyle = document.getElementById(this.id).style;

else if (document.layers)// nn4.x

this.elstyle = document.layers[this.id]

else

return;

}

if (this.path.step()) {

this.elstyle.left = this.path.x;

this.elstyle.top  = this.path.y;

animArray[this.index].timer = setTimeout(this.thisString + ".play()", this.msec);

}

else if (this.onanimationdone != null) {

if (typeof(this.onanimationdone) == "string")

eval(this.onanimationdone);

else if (typeof(this.onanimationdone) == "function")

this.onanimationdone();

}

}

function int_pause() {

clearTimeout(animArray[this.index].timer);

}

function int_stop() {

clearTimeout(animArray[this.index].timer);

this.path.reset();

}

}

</script>

<INPUT οnclick=a.play() type=button value=开始> <INPUT οnclick=a.pause() type=button value=暂停> <INPUT οnclick=a.stop() type=button value=停止>

<DIV id=dot

style="HEIGHT: 100px; LEFT: 250px; POSITION: absolute; TOP: 150px; WIDTH: 100px"><img

alt="" border=0 height=32 src="http://www.alixixi.com/p_w_picpaths/face/p_w_picpath21.gif" width=32 imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></DIV>

<SCRIPT type=text/javascript>

<!--

p1 = new StraightPath(150,50,250,50,12);

p2 = new CirclePath(250,150,100,100,90,-90,30);

p3 = new StraightPath(250,250,150,250,12);

p4 = new CirclePath(150,150,100,100,270,90,30);

p = p1.concat(p2).concat(p3).concat(p4);

p = p.rotate(150,50,45).add(new StraightPath(100,100,100,100,1));

a = new Animator("dot", p, 50);

a.onanimationdone = new Function("alert('一遍已经转完，请先按停止键再开始.')");

//-->

</SCRIPT>