Kompiuteriai Svetainės kūrimas

Meniu su Spraitais

        

xffx

Lankytojas
 
Pranešimai: 13
Vilnius

 2,036.22 Lt

Standartinė » 2009 Rgs 07, 12:44

Šiandien aš jums labai detaliai paaiškinsiu apie *Sprite* ir kaip su jų pagalba padaryta labai įdomu meniu.

Spraitai (Sprite) labai dažnai naudojami ant dideliu saitų na pvz:

[li]Yahoo
[li]Google
[li]Amazon

ir kiti, bet labai retai jos naudoja *normaliems* projektams. Priežastis labai paprasta, daugelis *web-masterių* tiesiog nenori gilintis į šią temą, jiems atrodo, kad tai labai sudėtinga. Iš tiesų - nieko sudėtingo čia nėra, svarbu pradėti

Ir pradėsim mes nuo kūrimo labai įdomaus meniu. Mums reikės: Vieno paveiksliuko, truputi JavaScript ir kalkuliatoriaus (:

Iš karto norėčiau parodyti kaip gražiai atrodo meniu iš spraitų, deja hostingo nebeturiu, atsisiųskite būtinai šį video prieš pradėdami skaityti mano pamoką ir pažiūrėkite meniu!!

Linkas į video failą su meniu:
http://www.failai.lt/b35f1zgu2g7z/tokss ... IU.avi.htm

*demo* versijoje jus galite stebėti kaip maži žmogeliukai pradeda bėgioti kai ant jų užvedame pelytę. Tai padaryta taip pat kaip ir bet koks *animuotas - paveiksliukas* Perjungiame paveiksliuką vieną ant kito, ir šitą ciklą tęsiame iki tol kol žmogeliukas nepasieks galo.

Mano pavyzdyje aš naudoju 4 žingsnius su paveiksliuku iki kiekvieno žingsnio (atleiskite už *tuftologija*)

Nustatome elemento *sprite* vietą.

Kai dirbsim su spraitais mes turime žinoti procentų tikslumų kur randasi kiekvienas elementas *sprite*

kad tai sužinoti mums reikės sužinoti paveiksliuko plotį ir starto vietą ta prasme iš kur prasidės pats paveiksliukas. Kai sužinosime šituos 2 skaičius mums reikės padaryti tokius išskaičiavimus:

To calculate this as an approximation, we need to know the image’s width and where our target starts. With this two numbers, we just need to apply simple math to get what we want.

Paveikslėlis

Paveiksliukas plotis kurį jūs matote aukščiau yra 183 px, o antras žingsnis randasi 57 px nuo kairės pusės. Tai dabar logiškai mastant mes gauname 31.15% (57/183 = 0.3115).

Maskiruojame

Paveikslėlis

Spraitų pagrindas - parodyti tik tai kas būtina! - visą kitą būtina paslėpti arba užmaskiruoti. Būtent todėl mums būtina žinoti tikslius išmatavimus kiekvieno elemento. Šitame pavyzdyje galima naudoti stačiakampį 20 ant 13, kad matytumėme vieną kvadratą.

CSS ir HTML

Dabar po įlgų ir nuobodžių kalbų mes galime padaryti pirmą dalį mūsų meniu naudojant CSS ir HTML programavimo kalbą. Sakydamas *pirmają dalį* aš turėjau galvoje mes darysime statinę meniu versiją.

Naudojant HTML mes darome tokią struktūrą kuri susideda iš trijų dalių, tai bus: Vienas pagrindinis konteineris; kitas skirtas maskiruotei ir trečias animuotėms elementams, taip pat vienas elementas *a* (Gipernuoroda)

Kodas: Pasirinkti visus
<div class="item">
<div id="doctor" class="object"></div>
<div id="doctormask" class="mask"></div>
<a href="#">Parents</a>
</div>
<div class="item">
<div id="girl" class="object"></div>
<div id="girlmask" class="mask"></div>

<a href="#">Geirls</a>
</div>
<div class="item">
<div id="boy" class="object"></div>
<div id="boymask" class="mask"></div>
<a href="#">Boys</a>
</div>
<div class="item">
<div id="kid" class="object"></div>
<div id="kidmask" class="mask"></div>
<a href="#">Kids</a>
</div>


[b]CSS mums leidžia nustatyti pradinę poziciją kiekvienam animaciniam elementui


Kodas: Pasirinkti visus
body {
background:#eeeeee;
}
#parent {
      width:14px;
      height:20px;
      background:url(people.gif);
      background-position:0% 0%;
      border:none;
      position:absolute;
      z-index:10;
      }
#parentmask {
      background:#ffffff;
      width:120px;
      height:20px;
      position:absolute;
      z-index:1;

      margin-left:8px;
      }
#girl {
      width:16px;
      height:20px;
      background:url(people.gif);
      background-position:27.2% 0%;
      border:none;
      position:absolute;
      z-index:10;
      }
#girlmask {
      background:#ffffff;
      width:120px;
      height:20px;
      position:absolute;
      z-index:1;
      margin-left:8px;
      }
#boy {
      width:16px;
      height:20px;
      background:url(people.gif);
      background-position:53.8% 0%;

      border:none;
      position:absolute;
      z-index:10;
      }
#boymask {
      background:#ffffff;
      width:120px;
      height:20px;
      position:absolute;
      z-index:1;
      margin-left:8px;
      }
#kid {
      width:16px;
      height:20px;
      background:url(people.gif);
      background-position:79.9% 0%;
      border:none;
      position:absolute;
      z-index:10;
      }
#kidmask {
      background:#ffffff;
      width:120px;
      height:20px;
      position:absolute;
      z-index:1;
      margin-left:8px;
      }
.item {
      background:#cccccc;
      width:128px;
      height:20px;
      }
.item a {
      margin-left:20px;
      }



Pažvelkime į elementą #boy, kuris mums sako, kad jo dydis 16 × 20 taškų, ir jis dalijasi savo fono paveikslėlius su kitais elementais (people.gif) ir mes norime pradėti rodymą nuo ir mes 53,8% iš kairės ir 0% nuo viršutinio krašto, kitiems elementams viskas padaryta analogiškai.

Dabar stebime rezultatą kurį gavome panaudojant HTML + CSS

Paveikslėlis

jQuery

Pirmiausia aš sukūriau kontrolinius kintamuosius kurie leido man pažymėti kiekvieną elementą su jo santykine padėtimi fone, tai pat kontrolioti visos animacijos procesą.

Kodas: Pasirinkti visus
var foot = [50,0,100,0];
  var step = 12;
  var sleeptime = 70;
  var mapping = Array();
  mapping["parent"] = { xr:20, xl:6.6, np:"0% 0%" };
  mapping["girl"] = { xr:47.5, xl:33, np:"27.2% 0%" };
  mapping["boy"] = { xr:74, xl:60.4, np:"53.8% 0%" };
  mapping["kid"] = { xr:100, xl:87, np:"79.9% 0%" };
px = function(val){

  return String(val)+"px";
  }
mpx = function(val){
  if(val == "auto")
  return 0;
  return Number(String(val).substring(0,String(val).length – 2));
  }


Kadangi viskas suderinta horizontaliai, mes naudojame *foot* kaip įprasta kintamajį tam, kad nustatyti vertikalią padėtį kiekviename žingsnyje. Pavyzdžiui, pirmasis žingsnis per vidurį (50%), antrasis žingsnis viršutinio paveiksliuko krašte (0%) ir jis juda iš viršaus į apačią.

*step* reiškia, kad mes judinsime mūsų elementus ir greitis bus 12px, o užsilaikymas bus 70 milisekundžių *px* ir *mpx*

Kodas: Pasirinkti visus
$(document).ready(function(){
        $(".item").find(".mask").css("opacity","0.8");
        move = function(el,elmask){
                  var newleft;
                  if($(el).data("direction") == "R"){
                          if($(el).position().left >= $(el).parent().width()){
                                  $(el).css("background-position", mapping[$(el).attr("id")].np);
                                  $(el).data("isMoving",false);
                                  return;
                          }
                          newleft = $(el).position().left + step;
                          newwidth = $(elmask).width() – step;
                          newwidth = (newwidth < 0)?0:newwidth;

                  } else {
                          if($(el).position().left <= step){
                                  $(el).css("background-position", mapping[$(el).attr("id")].np);
                                  $(el).data("isMoving",false);
                                  return;
                          }

                          newleft = $(el).position().left – step;
                          newwidth = $(elmask).width() + step;
                  }
                  if($(el).data("index") == 4)
                          $(el).data("index",0);
                  var y = foot[($(el).data("index"))];
                  $(el).data("index",($(el).data("index")+1))
                  $(el).css("background-position",$(el).data("x")+"% "+y+"%").css("left",px(newleft));
                  $(elmask).css("left",px(newleft)).css("width",px(newwidth));
                  setTimeout(function(){ move(el,elmask); },sleeptime);
          }
        $(".item").each(function(){
                  $(this).find(".object").data("isMoving",false);
          });
        $(".item").mouseenter(function(e){
                  var obj = $(this).find(".object");
                  eval($(this).find("a").attr("rel"))
                  obj.data("x",mapping[obj.attr("id")].xr);
                  obj.data("index",0);
                  obj.data("direction","R");

                  if(!obj.data("isMoving")){
                          obj.data("isMoving",true);
                          move(obj.get(0),$(this).find(".mask").get(0));
                  }
          });
         $(".item").mouseleave(function(e){
                  var obj = $(this).find(".object");
                  eval($(this).find("a").attr("rel"))
                  obj.data("x",mapping[obj.attr("id")].xl);
                  obj.data("direction","L");
                  if(!obj.data("isMoving")){
                          move(obj.get(0),$(this).find(".mask").get(0));
                  }
          });
  });


iš pačio viršaus iki apačios mes užduodame maskiruote su permatomumu 80% (0.8) Toliau mes apibrėžiame funkcija *move* kuri ima vieną elementą ir jo maskiruote o toliau jį judina remdamasi į informaciją kuri randasi konteineryje *data*

Visa CSS + jQuery kodą būtina patalpinti dokumento pradžioje ir taip pat neužmirštam pajungti:

Kodas: Pasirinkti visus
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>



Štai ir viskas, meniu padarytas.

--------------------------------------


Vartotojo avataras

vilkas159

Lankytojas
 
Pranešimai: 19

 605.26 Lt

Standartinė » 2010 Vas 24, 17:28

kas cia per {S}? :P :D



Kompiuteriai Svetainės kūrimas





 
Dabar prisijungę

Šiuo metu prisijungę 0 narių :: 0 registruotų, 0 slaptų ir 0 svečių
Daugiausia vartotojų (555) buvo 2010 Bir 02, 09:13

Vartotojai naršantys šį forumą: Registruotų vartotojų nėra ir 0 svečių