网页代码设计技巧系列之---按钮控制图片移动.doc

脚本说明:把如下代码加入区域中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 concatfunction PathList(inPathList) / All path objects must have these 5 methodsthis.x = 0; / Retrieves the current x valuethis.y = 0;this.step = int_step; / Move to next stepthis.reset = int_reset; / Resets the current position/ The rest may vary from different path objectsthis.pathList = inPathList;this.currentPath = 0;function int_step() if (this.currentPath = this.pathList.length) return false;if (this.pathListthis.currentPath.step() this.x = this.pathListthis.currentPath.x;this.y = this.pathListthis.currentPath.y;else this.currentPath+;if (this.currentPath = this.pathList.length) return false;this.x = this.pathListthis.currentPath.x;this.y = this.pathListthis.currentPath.y;return true;function int_reset() this.currentPath = 0;for (var i=0; ithis.pathList.length; i+)this.pathListi.reset();this.x = this.pathListthis.currentPath.x;this.y = this.pathListthis.currentPath.y; / The following object is used for adding two pathsfunction PathAdd(p1,p2) / All path objects must have these 5 methodsthis.x = 0; / Retrieves the current x valuethis.y = 0;this.step = int_step; / Move to next stepthis.reset = int_reset; / Resets the current position/ The rest may vary from different path objectsthis._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 valuethis.y = 0;this.step = int_step; / Move to next stepthis.reset = int_reset; / Resets the current position/ The rest may vary from different path objectsthis._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;elseo.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;PathAtotype = new Path;PathLtotype = new Path;RotatePtotype = new Path; function CirclePath(x, y, _xr, _yr, fromV, toV, n) / All path objects must have these 5 methodsthis.x = 0; / Retrieves the current x valuethis.y = 0;this.step = int_step; / Move to next stepthis.reset = int_reset;/ The rest may vary from different path objectsthis.steps = n; / NN work around. NN cant 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 stepsif (this.steps 0)this.deltaV = (this.endV - this.startV)/n; / work around netscape bug. Netscape couldnt handle thiselse / as a local variablethis.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;CirclePtotype = new Path;function StraightPath(fromX, fromY, toX, toY, n) / All path objects must have these 5 methodsthis.x = fromX; / Retrieves the current x valuethis.y = fromY;this.step = int_step; / Move to next step/ Returns true if the step was succesfull/ Returns false when the path has been donethis.reset = int_reset;/ The rest may vary from different path objectsthis.startX = fromX;this.startY = fromY;this.endX = toX;this.endY = toY;/ Initiate stepsthis.steps = n;this.totalSteps = n;if (this.totalSteps = 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;StraightPtotype = new Path;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;animArraythis.index = this;this.thisString = animArray + this.index + ;animIndex+;function int_play() if (this.elstyle = null) / this.elstyle = (document.all != null) ? document.allthis.id.style : document.layersthis.id;if (document.all) / IE4this.elstyle = document.allthis.id.style;else if (document.getElementB