JavaScript DHTML/Ajax Layer/Layer Position

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

RelativeLayers : Relative positioning example

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML> <HEAD> <TITLE>RelativeLayers : Relative positioning example</TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078"> 

    Layer 1.

   <A HREF="javascript:layer1.visibleMoveBy(-10,0)">Left</A>
   <A HREF="javascript:layer1.visibleMoveBy(10,0)">Right</A>
   <A HREF="javascript:layer1.visibleMoveBy(0,-10)">Up</A>
   <A HREF="javascript:layer1.visibleMoveBy(0,10)">Down</A>

   <A HREF="javascript:layer1.visibleResizeBy(0,"-10")">Shorter</A>
   <A HREF="javascript:layer1.visibleResizeBy(0,"10")">Longer</A>


    Layer 2.

   <A HREF="javascript:layer2.visibleResizeBy("-10",0)">Narrower</A>
   <A HREF="javascript:layer2.visibleResizeBy("10",0)">Wider</A>
   <A HREF="javascript:layer2.visibleResizeBy(0,"-10")">Shorter</A>
   <A HREF="javascript:layer2.visibleResizeBy(0,"10")">Longer</A>


    Layer 3.

   <A HREF="javascript:layer3.visibleResizeBy("-10",0)">Narrower</A>
   <A HREF="javascript:layer3.visibleResizeBy("10",0)">Wider</A>
   <A HREF="javascript:layer3.visibleResizeBy(0,"-10")">Shorter</A>
   <A HREF="javascript:layer3.visibleResizeBy(0,"10")">Longer</A>


    Layer 4.

   <A HREF="javascript:layer4.visibleResizeBy("-10",0)">Narrower</A>
   <A HREF="javascript:layer4.visibleResizeBy("10",0)">Wider</A>
   <A HREF="javascript:layer4.visibleResizeBy(0,"-10")">Shorter</A>
   <A HREF="javascript:layer4.visibleResizeBy(0,"10")">Longer</A>

</BODY> </HTML> 

      </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>


Slide layer to a position

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - DynLayer [Slide]</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); </script> <script language="Javascript"> block = new DynLayer(); block.setSize(20,20); block.setLocation(100,100); block.setBgColor("red"); var listener = {}; listener.onpathstart = function(e) { 

 status = "start";

} listener.onpathrun = function(e) { 

 var o = e.getSource();
 status = "play "+o.x+" "+o.y;

} listener.onpathstop = function(e) { 

 var o = e.getSource();
 status = "stop "+o.x+" "+o.y;;

} block.addEventListener(listener); dynapi.document.addChild(block); //--> </script> </head> <body bgcolor="#999999"> <script> dynapi.document.insertAllChildren(); </script>

SlideTo:
(<a href="javascript:block.slideTo(100,100)">100,100</a>)
(<a href="javascript:block.slideTo(200,100)">200,100</a>)
(<a href="javascript:block.slideTo(200,200)">200,200</a>)
(<a href="javascript:block.slideTo(100,200)">100,200</a>)
(<a href="javascript:block.slideTo(400,50)">400,50</a>)
(<a href="javascript:block.slideTo(50,400)">50,400</a>) </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/Layer_Position&oldid=1651»