JavaScript DHTML/Ajax Layer/Image Clip

Материал из Web эксперт
Перейти к: навигация, поиск

Animation based on ImageClip

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - ImageClip</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> 

 dynapi.library.setPath("./dynapisrc/")
 dynapi.library.include("dynapi.api")
 dynapi.library.include("dynapi.fx.MotionX")
 dynapi.library.include("dynapi.fx.TimerX");
 dynapi.library.include("ImageClip");

</script> <script language="Javascript"> 

 var img1 = dynapi.functions.getImage("./dynapiexamples/images/penguin_red.gif");
 var img2 = dynapi.functions.getImage("./dynapiexamples/images/penguin_blue.gif");
 vp=new DynLayer(null,10,65,500,300,"#FFFFFF");
 vp._overflow = "hidden";
 redpenguin= new ImageClip({x:100,y:100,w:64,h:64,clipImage:img1,cols:11,rows:2,speed:150});
 bluepenguin= new ImageClip({x:400,y:200,w:64,h:64,clipImage:img2,cols:11,rows:2,speed:150});
 tree=new DynLayer(null,150,60,207,214)
 tree.setHTML("<img src="./dynapiexamples/images/tree.gif">")
 evn= {
   ontimer : function(e){
     // timer event
     var me,xx=0,yy=0;
     me=e.getSource();
     xx=Math.random()*430;
     yy=Math.random()*200;
     me.lpengx=me.x;
     me.lpengy=me.y;
     me.pengx=xx;
     me.pengy=yy;
     me.slideTo(xx,yy,null,50);
   },
   onmove : function(e){
     var me=e.getSource();
     var fn=0,col=0
     if (me.pengx<=me.x) {col=0}else{col=2}
     fn=me.fm
     if (fn==1){fn=2}else{fn=1}
     me.setFrame(fn+col);
     me.fm=fn
     if (me.pengx==me.x && me.pengy==me.y) {
       if (Math.floor(Math.random()*10)==5) {
         me.playAnimation(false,"17>18,17<18,17>18,22")
       }else if (Math.floor(Math.random()*10)==3) {
         me.playAnimation(false,"21>22,21<22,21>22")
       }else {
         me.setFrame(22)
       }
     }
   }
 }
 redpenguin.addEventListener(evn);
 bluepenguin.addEventListener(evn);
 redpenguin.startTimer(2000);
 bluepenguin.startTimer(1500);
 vp.addChild(redpenguin);
 vp.addChild(bluepenguin);
 vp.addChild(tree);
 dynapi.document.addChild(vp);

</script> </head> <body>

ImageClip Widget

<script> 

 dynapi.document.insertAllChildren();

</script> </body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Image Clip and animation

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - ImageClip</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> 

 dynapi.library.setPath("./dynapisrc/")
 dynapi.library.include("dynapi.api")
 dynapi.library.include("dynapi.fx.MotionX")
 dynapi.library.include("dynapi.fx.TimerX");
 dynapi.library.include("ImageClip");

</script> <script language="Javascript"> 

 var img1 = dynapi.functions.getImage("./dynapiexamples/images/penguin_red.gif");
 var img2 = dynapi.functions.getImage("./dynapiexamples/images/penguin_blue.gif");
 vp=new DynLayer(null,10,65,500,300,"#FFFFFF");
 vp._overflow = "hidden";
 redpenguin= new ImageClip({x:100,y:100,w:64,h:64,clipImage:img1,cols:11,rows:2,speed:150});
 bluepenguin= new ImageClip({x:400,y:200,w:64,h:64,clipImage:img2,cols:11,rows:2,speed:150});
 tree=new DynLayer(null,150,60,207,214)
 tree.setHTML("<img src="./dynapiexamples/images/tree.gif">")
 evn= {
   ontimer : function(e){
     // timer event
     var me,xx=0,yy=0;
     me=e.getSource();
     xx=Math.random()*430;
     yy=Math.random()*200;
     me.lpengx=me.x;
     me.lpengy=me.y;
     me.pengx=xx;
     me.pengy=yy;
     me.slideTo(xx,yy,null,50);
   },
   onmove : function(e){
     var me=e.getSource();
     var fn=0,col=0
     if (me.pengx<=me.x) {col=0}else{col=2}
     fn=me.fm
     if (fn==1){fn=2}else{fn=1}
     me.setFrame(fn+col);
     me.fm=fn
     if (me.pengx==me.x && me.pengy==me.y) {
       if (Math.floor(Math.random()*10)==5) {
         me.playAnimation(false,"17>18,17<18,17>18,22")
       }else if (Math.floor(Math.random()*10)==3) {
         me.playAnimation(false,"21>22,21<22,21>22")
       }else {
         me.setFrame(22)
       }
     }
   }
 }
 redpenguin.addEventListener(evn);
 bluepenguin.addEventListener(evn);
 redpenguin.startTimer(2000);
 bluepenguin.startTimer(1500);
 vp.addChild(redpenguin);
 vp.addChild(bluepenguin);
 vp.addChild(tree);
 dynapi.document.addChild(vp);

</script> </head> <body>

ImageClip Widget

<script> 

 dynapi.document.insertAllChildren();

</script> </body> </html> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Image_Clip&oldid=1685»