În următorul exemplu, am să vă arăt cum se poate deplasa un element html în browser, folosind limbajul jQuery.
Creați un fișier html și introduceți următorul cod in fișier:
<html>
<head>
<title>jQuery</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<style>
#patrat{
width:100px;
height:100px;
background-color:#ff0000;
position:absolute;
top:100px;
left:100px;
}
</style></head>
<body>
<div id=”patrat”></div>
<script>
$(document).ready(
function(){
$(document).on(‘keyup’,function(event){
var key_code = event.which;
//stanga
if(key_code === 37){
var pos = $(‘#patrat’).offset().left;
$(‘#patrat’).css(‘left’,pos-1);
}//sus
if(key_code === 38){
var pos = $(‘#patrat’).offset().top;
$(‘#patrat’).css(‘top’,pos-1);
}//dreapta
if(key_code === 39){
var pos = $(‘#patrat’).offset().left;
$(‘#patrat’).css(‘left’,pos+1);
}//jos
if(key_code === 40){
var pos = $(‘#patrat’).offset().top;
$(‘#patrat’).css(‘top’,pos+1);
}}
);}
);
</script>
</body>
</html>
După cum vezi, în secțiunea head, am încarcat librăria jQuery.
Tot în secțiunea head, am definit și proprietățile de stil ale elementului pe care am să-l deplasez în browser.
Am folosit un tag de tip div, căruia i-am atașat un atribut de tip id, atribut căruia i-am atașat valoarea patrat.
Acestui element i-am definit următoarele proprietăți de stil:
– înălțime de 100px
– lățime de 100px
– culoarea roșu pentru background
– poziție absolută pentru element
– distanța de 100px față de marginea de sus a browserului
– distanța de 100px față de marginea din stanga a browserului
După încărcarea paginii, folosind jQuery, am descris ce ar trebui să se întîmple în cazul în care utilizatorul apasă o tastă.
Pentru a sesiza evenimentul și pentru a declanșa functionalitatea, am folosit următorul cod:
$(document).on(‘keyup’,function(event){
, cod din care să înțelegi următoarele:
– focusul trebuie sa fie activ pe browserul și tabul curent
– utilizatorul a apăsat o tastă, iar în momentul în care utilizatorul lasă libera tasta, se declanșează evenimentul keyup, moment în care este declanșată funcția anonimă funtion(), cu parametrul event.
În momentul în care se declanșează evenimentul keyup, în parametrul event, se reține si codul ascii al tastei.
Pe noi ne interesează să detectăm următoarele cazuri:
– apăsarea tastei LEFT, care are codul ascii, 37
– apăsarea tastei UP, care are codul ascii 38
– apăsarea tastei RIGHT, care are codul ascii 39
– apăsarea tastei DOWN, care are codul ascii 40
Am să explic numai unul dintre cazuri, si anume cazul in care s-a apăsat tasta LEFT.
//reținem codul ascii al tastei apăsate
var key_code = event.which;
//stanga
if(key_code === 37){
//localizăm elementul în document, accesăm proprietatea offset a elementului, proprietate care returnează poziția exactă a alementului în browser, după care reținem poziția elementului față de marginea din stânga a browserului
var pos = $(‘#patrat’).offset().left;
//accesăm elementul, folosindu-ne de id-ul unicat, care are valoarea patrat, după care accesăm proprietățile de stil ale elementului, după care modificăm valoarea proprietății left, decrementând valoarea acesteia cu o unitate
$(‘#patrat’).css(‘left’,pos-1);
}
Se procedează la fel și în celelalte cazuri.
ps: atentie la copy/paste; wordpress tinde sa encodeze ghilimelele