按钮控制图片移动

下面为效果显示

脚本说明:
把如下代码加入<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;

// 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;
	}

StraightPath.prototype = new Path;
</script>
<script type="text/javascript">
var animIndex = 0;
var animArray = new Array();