网页特效大全－可控制的旋转图片

可控制的旋转图片

加入如下代码到body区域

function int_concat(p) {
return new PathList(new Array(this, p));
}

function int_add(p) {
return new PathAdd(this, p);
}

// 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: 100px; POSITION: absolute; TOP: 150px; WIDTH: 100px"><IMG alt="" border=0 height=55 src="images/1.gif" width=85></DIV>
<SCRIPT type=text/javascript>

</SCRIPT>