jQuery plugins - LavaLamp
máj 15

LavaLamp

Menü lávalámpa effekttel

Verzió: 0.2.0
Kiadás dátuma: 2007
Fejlesztő: Ganeshji Marwaha
Liszensz: MIT, GPL

Bevezető

A Lavalamp plugin nem mai gyerek, ráadásul az első "verziója" nem is jQuery-re jelent meg. Mindettől függetlenül még ma is aktuális lehet, ha szeretnénk a menünket kicsit látványosabbá tenni.

A plugin az easing.js adta lehetőségekre épít, ezzel biztosítva a menünek az úgynevezett lávalámpa hatást.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.easing.min.js"></script>
            <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
          

Deklaráció

Ha ténylegesen a lávalámpa hatást szeretnénk elérni, akkor az alapértelmezett deklaráció nem lesz elegendő, mivel az alapértelmezett animáció lineáris. Helyette válasszuk a backout típust:

            $(document).ready(function(){
              $('#pelda').Lavalamp({
                fx: 'backout'
              });
            }); 
          

Használat

A használathoz a menüknél már megszokott, egyszerű listára van szükségünk:

            <ul id="pelda">
              <li class="current"><a href="#">menü 1</a></li>
              <li><a href="#">menü 2</a></li>
              <li><a href="#">menü 3</a></li>
              <li><a href="#">...</a></li>
            </ul>
          

Teljes paraméterlista

  • fx: az animáció típusa (alapértelmezett: 'linear')
  • speed: az animáció sebessége milliszekundumban (alapértelmezett: 500)
  • click: függvény meghívása a menüponton való klikkeléskor