可以控制旋转的图像

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<!--  saved from url=(0035)http://www.jscode.cn/JsCode/372.htm  -->
< HTML >< HEAD >< TITLE > 网页特效|Linkweb.cn/Js|---可以控制旋转的图像 </ TITLE >
< META  http-equiv =Content-Type  content ="text/html; charset=gb2312" >
< META  content ="MSHTML 6.00.3790.2795"  name =GENERATOR ></ HEAD >
< 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 + " xr: " + xr + " v: " + 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 ="LEFT: 100px; WIDTH: 100px; POSITION: absolute; TOP: 150px; HEIGHT: 100px" >< IMG 
height =55  alt =""  src ="网页特效Linkweb_cn-Js---可以控制旋转的图像_files/flag.gif"  width =85 
border =0 ></ 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 >
</ BODY ></ HTML >