JavaScript DHTML/Ajax Layer/Text Effects

Материал из Web эксперт
Версия от 07:15, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Fade/Appear effect functional test

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us Fade/Appear effect functional test</h1>
<p>Note: these tests use the browser default CSS style rules.</p>
<h2>DIV</h2>
<div id="test_div">TEST</div>
<a href="#" onclick="Effect.Fade("test_div"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_div"); return false;">Effect.Appear</a>
<h2>SPAN</h2>
<span id="test_span">TEST</span><br/>
<a href="#" onclick="Effect.Fade("test_span"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_span"); return false;">Effect.Appear</a>
<h2>P</h2>
<p id="test_p">TEST</p><br/>
<a href="#" onclick="Effect.Fade("test_p"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_p"); return false;">Effect.Appear</a>
<h2>IMG</h2>
<img id="test_img" src="icon.png" alt="test image" /><br/>
<a href="#" onclick="Effect.Fade("test_img"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_img"); return false;">Effect.Appear</a>

<hr/>
<p style="color:red;">The following elements are not supported with Fade/Appear on all browsers!</p>
<h2>TABLE</h2>
<table id="test_table"><tbody><tr><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade("test_table"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_table"); return false;">Effect.Appear</a>
<h2>TBODY</h2>
<table><tbody id="test_tbody"><tr><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade("test_tbody"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_tbody"); return false;">Effect.Appear</a>
<h2>TR</h2>
<table><tbody><tr id="test_tr"><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade("test_tr"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_tr"); return false;">Effect.Appear</a>
<h2>TD</h2>
<table><tbody><tr><td id="test_td">TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade("test_td"); return false;">Effect.Fade</a> | 
<a href="#" onclick="Effect.Appear("test_td"); return false;">Effect.Appear</a>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Highlight text dynamically

<html>
<head>
<title>DynAPI Examples - DynLayer Anchor - Anchoring</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">
cnt=0;
w = new DynLayer(" ",-10,-10,20,18); // use negative x,y to hide layer during ns4 resize (or reload)
w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28});
w.__a=w.addChild(new DynLayer(null,null,null,null,null,"#000000"));
w.__b=w.addChild(new DynLayer(null,null,null,null,null,"#000000"));
w.__c=w.addChild(new DynLayer(null,null,null,null,null,"#000000"));
w.__d=w.addChild(new DynLayer(null,null,null,null,null,"#000000"));
w.__a.setAnchor({stretchH:"100%",stretchV:2,top:0})
w.__b.setAnchor({stretchH:2,stretchV:"100%",right:0})
w.__c.setAnchor({stretchH:"100%",stretchV:2,bottom:0})
w.__d.setAnchor({stretchH:2,stretchV:"100%",left:0})
window.setTimeout("setColor()",200);
dynapi.document.addChild(w);
function setColor() {
  var color="#ffcc00";
  cnt++
  if (cnt>4)cnt=1;
  if(cnt==1) w.__a.setBgColor(color);
  else w.__a.setBgColor("#000000");
  if(cnt==2) w.__b.setBgColor(color);
  else w.__b.setBgColor("#000000");
  if(cnt==3) w.__c.setBgColor(color);
  else w.__c.setBgColor("#000000");
  if(cnt==4) w.__d.setBgColor(color);
  else w.__d.setBgColor("#000000");
  window.setTimeout("setColor()",300);
}
function setAnchor(t){
  if(t=="a") w.setAnchor({topA:"a",leftA:"a",stretchH:90,stretchV:18});
  if(t=="b") w.setAnchor({topA:"b",leftA:"b",stretchH:100,stretchV:18});
  if(t=="c") w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28});
  if(t=="d") w.setAnchor({topA:"d",leftA:"d",stretchH:120,stretchV:35});
  if(t=="e") w.setAnchor({topA:"e",leftA:"e",stretchH:80,stretchV:18});
  if(t=="f") w.setAnchor({topA:"f1",leftA:"f1",bottomA:"f3",rightA:"f2",stretchH:"*",stretchV:"*"});
}
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
dynapi.document.insertAllChildren();
</script>

<p align="center"><b><u><font face="Arial" size="4">&nbsp;Anchoring/Docking</font></u></b></p>
<table border="1" width="100%">
  <tr>
    <td width="16%" valign="top" align="center" rowspan="2"><font face="Arial" size="2"><b>Change Anchor
      Location</b><br>
      <br>
      <a href="javascript:setAnchor("a")">Anchor A</a><br>
      <a href="javascript:setAnchor("b")">Anchor B</a><br>
      <a href="javascript:setAnchor("c")">Anchor C</a><br>
      <a href="javascript:setAnchor("d")">Anchor D</a><br>
      <a href="javascript:setAnchor("e")">Anchor E</a><br>
      <a href="javascript:setAnchor("f")">Anchor F</a></font>
      <p><font face="Arial" size="2">&nbsp;Resize the browser to see the changes</font>
      <p align="center"><font face="Arial" size="2" color="#000080">
      topA<br>
      rightA<br>
      bottomA<br>
      leftA<br>
      </font></td>
    <td width="84%" valign="top">
      <p><font face="Arial" size="2">A example of an anchor
      :</font> <font face="Arial" size="2">&lt;a name=&quot;myname&quot;
      id=&quot;myname&quot;&gt;&amp;nbsp;&lt;/a&gt;</font>
      <p><font face="Arial" size="2">Some text here,
      some more text here some text here, some more text here. some more text here
      some &nbsp;text here, some more text here.<font color="#008000"> </font> </font>
      <a id="a" name="a"><font color="#000080" size="3" face="Arial">AnchorHere</font></a>
      <font face="Arial" size="2">
      some more text here some text here, some more text here. some more text
      here some text here, some more text here. some more text here some text
      here, some more text here. </font>
      <a id="b" name="b"><font color="#000080" face="Arial" size="3"><b>AnchorHere</b></font></a><p><font face="Arial" size="2">And more text here some text here, some
      more text here. some more text here some text here, some more text here.
      some more text here some text here, some more text here. some more text
      here some text here, some more text here. some more text here&nbsp; some text here, some more text here.
      </font>some more text here&nbsp;&nbsp;</p>
      <p align="center"><b><font size="5"><a id="c" name="c">MoreText</a></font></b></p>
      <p><font face="Arial" size="2"> &nbsp;some text
      here, some more text here.some more text here some text here, some more
      text here.some more text here some text here, some more text here.some
      more text here some text here, some more text here.some more text here
      some text here, some more text here.some more text here some text here,
      some more text here.some more text here some text here, some more text
      here.</font></p>
    </td>
  </tr>
  <tr>
    <td width="84%" valign="top">
      <table border="0" width="100%">
        <tr>
          <td width="50%" valign="top" colspan="2">some more text here some text
            here, some more text here. some more text here some text here, some
            more text here.some more text
            <table border="0" width="100%" cellspacing="1">
              <tr>
                <td width="100%" valign="top">
                  <p align="center"><b><font size="6"><a id="d" name="d">Testing</a></font></b>
                  </p>
                  <p>
            here some text here, some more text here.some more text here some
            text here, some more text here.some more text here some text here,
            some more text here.some more text here some text here, some more
            text here some more text here some</p>
                </td>
              </tr>
            </table>
            <p>&nbsp; text here, some more text
            here.some more text here some text here, some more text here.some
            more text here some text here, some more text here..</p>
          </td>
          <td width="50%" valign="top" rowspan="3">some more text here some text here, some
            more text here.some more text here some text here, some more text
            here.
            <p align="center"><a name="e" id="e"><font size="3" face="Arial" color="#000080">Anchor_here</font></a></p>
            <p>some more text here some text here, some more text here.some more
            text here some text here, some more text here.some more text here
            some text here, some more text here.
            <p>some more text here some text here, some more text
            here.some more text here some text here, some more text here. some more text here some text here, some more text
            here.some more text here some text here, some more text here.some
            more text here some text here, some more text here.some more text here some text here, some more text
            here.some more text here some text here, some more text here.some
            more text here some text here, some more text here.some more text here some text here, some more text
            here.some more text here some text here, some more text here.some
            more text here some text here, some more text here.</p>
          </td>
        </tr>
        <tr>
          <td width="156" valign="top">some more text here some text here, some
            more text here.</td>
          <td width="155" valign="middle" align="center">
            <table border="0" width="100%" height="100%">
              <tr>
                <td width="50%"><a id="f1" name="f1">1</a></td>
                <td width="50%" align="right"><a id="f2" name="f2">2</a></td>
              </tr>
              <tr>
                <td width="50%" valign="bottom">&nbsp;</td>
                <td width="50%" align="right" valign="bottom">&nbsp;&nbsp;</td>
              </tr>
              <tr>
                <td width="50%" valign="bottom">&nbsp;</td>
                <td width="50%" align="right" valign="bottom"><a id="f3" name="f3">3</a></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td width="311" valign="top" colspan="2">some more text here some text
            here, some more text here.some more text here some text here, some
            more text here.</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>


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


Rainbow highligher

<html>
<head>
<title>DynAPI Examples - Highlighter</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.functions.Color");
dynapi.library.include("dynapi.gui.Highlighter");
</script>
<script language="Javascript">
var x=0,y=50,c=0,lyr,clr,inc=1;
var d1=new Date();
for(var i=0;i<300;i++){
  y+=inc;
  if(y>200) inc*=-1;
  x=50+c*1;
  c+=1;
  if (i<=100) clr=dynapi.functions.fadeColor("#0000FF","#FF0000",i);
  else if (i>100 && i<=200) clr=dynapi.functions.fadeColor("#FF0000","#00FF00",i-100);
  else clr=dynapi.functions.fadeColor("#00FF00","#FFFFFF",(i-200));
  lyr=new Highlighter(x,y,1,50,clr);
  dynapi.document.addChild(lyr);
}
dynapi.onLoad(init);
function init(){
  var d2=new Date();
  document.frm.txt.value = i+" layers in "+(d2-d1)+" milliseconds";
}
</script>
</head>
<body>
<form name="frm">Speed:
<input type="text" size="50" name="txt" value="loading...">
</form>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


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


Text BlindUp and BlindDown

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
    #d1 { background-color: #888; }
  </style>
  
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("blind_up","d1",{duration:1.5}) }); return false;">BlindUp</a> |
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("blind_down",{duration:1.5}) }); return false;">BlindDown</a> |
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla 
facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, 
neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a 
neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus 
feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. 
Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget 
nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. 
Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla 
facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, 
neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a 
neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus 
feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. 
Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget 
nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. 
Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text color fade in

<html>
<head>
<title>DynAPI Examples - Fader</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("Fader");
</script>
<script language="Javascript">
var lyr1=new DynLayer("<h1><font color="blue">This</font></h1>",0,0,100,100);
var lyr2=new DynLayer("<h1><font color="green">Is</font></h1>",300,200,100,100);
var lyr3=new DynLayer("<h1><font color="red">Not</font></h1>",0,50,100,100);
var lyr4=new DynLayer("<h1><font color="navy">Flash!</font></h1>",400,250,100,100);
var lyr5=new DynLayer("<h1><font color="navy"><b>DynAPI <font color="green">3.0</font> Rulez!</b></font></h1>",100,300,300,100);
var lyr6=new DynLayer("<h1><font color="black"><b>Got DynAPI?</b></font></h1>",400,100,200,100);
dynapi.document.addChild(lyr1);
dynapi.document.addChild(lyr2);
dynapi.document.addChild(lyr3);
dynapi.document.addChild(lyr4);
dynapi.document.addChild(lyr5);
dynapi.document.addChild(lyr6);
lyr1.setVisible(false);
lyr2.setVisible(false);
lyr3.setVisible(false);
lyr4.setVisible(false);
lyr5.setVisible(false);
lyr6.setVisible(false);
dynapi.onLoad(function(){
  lyr1.fadeIn(); lyr1.slideTo(100,100);
  lyr1.addEventListener({
    onfadein:function(e){
      lyr2.fadeIn(); lyr2.slideTo(170,100);
    }
  });
  lyr2.addEventListener({
    onfadein:function(e){
      lyr3.fadeIn(); lyr3.slideTo(200,100);
    }
  });
  lyr3.addEventListener({
    onfadein:function(e){
      lyr4.fadeIn();lyr4.slideTo(260,100);
    }
  });
  lyr4.addEventListener({
    onfadein:function(e){
      lyr1.fadeOut();
      lyr2.fadeOut();
      lyr3.fadeOut();
      lyr4.fadeOut();
    },
    onfadeout:function(e){
      window.setTimeout("lyr5.fadeIn();lyr5.slideTo(null,100);",600);
    }
  });
  lyr5.addEventListener({
    onfadein:function(e){
      window.setTimeout("lyr5.fadeOut();lyr5.slideTo(400,100);",600);
    },
    onfadeout:function(e){
      window.setTimeout("lyr6.fadeIn();lyr6.slideTo(150,100);",100);
    }
  });
});
</script>
</head>
<body>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


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


Text Effects: highlight

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
    #d1 { background-color: #888; }
  </style>
  
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("highlight",{duration:1.5}) }); return false;">Highlight</a> |
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla 
facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, 
neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a 
neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus 
feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. 
Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget 
nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. 
Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla 
facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, 
neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a 
neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus 
feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. 
Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget 
nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. 
Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: outlook bar

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#menu {
  width: 300px;
  border: 1px #000 solid;
}
.menu_header {
  background-color: #00CC99;
  color: #FFFFFF;
}
.menu_block {
  background-color: #006699;
  color: #FFFFFF;
  overflow:hidden;
}
.menu_block div {
}
.close_block {
  position: relative;
  width: 100%;
  bottom: 0px;
  height: 15px;
  text-align: center;
  display: block;
}
</style>
<script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
<script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
<script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head>
<body>
<div id="menu">
  <div class="menu_header" id="menu_header1"><a href="#" onClick="new Effect.SlideDown("menu_block1"); return false;">HEADER 1</a></div>
  <div class="menu_block_container" id="menu_block_container1">
    <div class="menu_block" id="menu_block1"><div>
      text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        <a href="#" class="close_block" onClick="new Effect.SlideUp("menu_block1"); return false;">close</a></div></div>
  </div>
  <div class="menu_header" id="menu_header2"><a href="#" onClick="new Effect.SlideDown("menu_block2"); return false;">HEADER 2</a></div>
  <div class="menu_block_container" id="menu_block_container2">
    <div class="menu_block" id="menu_block2"><div>
      text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        text<br>
        <a href="#" class="close_block" onClick="new Effect.SlideUp("menu_block2"); return false;">close</a></div></div>
  </div>
</div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text Effects: Puff

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf-8">
    Position.includeScrollOffsets = true;
  </script>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Puff</h2>
<div id="p1" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
  click to test puff, no position set
</div>
<div id="p2" style="float:right;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
  click to test puff, floats
</div>
<div id="p3" style="position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
  click to test puff, absolute position set
</div>
<h3>Floating inside a container</h3>
<div style="width:300px;height:300px;border:1px solid red">
  <div style="float:left;width:100px;height:100px;background-color:#888;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#999;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#aaa;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#bbb;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#ccc;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#ddd;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#eee;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#777;" onclick="Effect.Puff(this)">
    click to puff
  </div>
  <div style="float:left;width:100px;height:100px;background-color:#666;" onclick="Effect.Puff(this)">
    click to puff
  </div>
</div>
  
</div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: Scale X only, Scale Y only, Scale X and Y

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
    #scaleable { background-color: #888; }
  </style>
  
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: true, scaleY: false }); return false;">Scale X only</a> |
<a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: false, scaleY: true }); return false;">Scale Y only</a> |
<a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: true, scaleY: true }); return false;">Scale X and Y</a>
<div id="scaleable">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. 
Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia 
nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, 
tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id 
dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. 
Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum 
tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta 
id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, 
vehicula a, massa.
</div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: scroll (slow-motion) down-below, scroll last-heading

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us ScrollTo effect functional test</h1>
<a href="#" onclick="new Effect.ScrollTo("down-below",{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>,
<a href="#" onclick="new Effect.ScrollTo("last-heading"); return false;">scroll last-heading</a>
<h2 id="first-heading"><b>first-heading</b>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2 id="down-below"><b>DOWN BELOW</b>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<a href="#" onclick="new Effect.ScrollTo("first-heading"); return false;">scroll...</a>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h2 id="last-heading">Heading 2</h2>
<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: slide down, slide up

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.SlideDown/Effect.SlideUp</h2>
<script type="text/javascript" language="javascript" charset="utf-8">
  var effect_1 = null;
</script>
<a href="#" onclick="effect_1 = Effect.SlideDown("d1",{duration:1.0}); return false;">Start slide down</a> | 
<a href="#" onclick="effect_1 = Effect.SlideUp("d1",{duration:1.0}); return false;">Start slide up</a> | 
<a href="#" onclick="effect_1.cancel(); return false;">cancel()</a> |
<a href="#" onclick="alert(Object.inspect($("d1").firstChild.style)); return false;">inspect()</a> |
<a href="#" onclick="$("d1").firstChild.innerHTML += $("d1").firstChild.innerHTML; return false;">add content</a>
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. 
Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia 
nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, 
tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id 
dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. 
Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum 
tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, 
interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, 
vehicula a, massa.
</p>
</div></div>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text: Slide Up and Slide Down

<!-- 
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Effects functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
  <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
    #d1 { background-color: #888; }
  </style>
  
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("slide_up",{duration:1.5}) }); return false;">SlideUp</a> |
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("slide_down",{duration:1.5}) }); return false;">SlideDown</a>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla 
facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, 
neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a 
neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus 
feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. 
Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget 
nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. 
Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla 
facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, 
neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a 
neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus 
feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. 
Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget 
nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. 
Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque 
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>

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