142、按钮控制图片移动

142、按钮控制图片移动

脚本说明:

把如下代码加入<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 onclick=a.play() type=button value=开始> <INPUT onclick=a.pause() type=button value=暂停> <INPUT onclick=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="globe.gif" width=32></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>

 

Write a comment

Comments: 0