Spraitai (Sprite) labai dažnai naudojami ant dideliu saitų na pvz:
- Yahoo
- 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.
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
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* (Hipernuoroda)
- 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>
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
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.
