Variabilele dinamice pentru schimbarea pozelor de fundal

Am gasit cateva raspunsuri slab legate, dar nici unul care are nivelul de variabilitate de care am nevoie.

Încerc să creez o paletă de cipuri de schimbare a culorilor, similară cu cea pe care o găsiți pe un site de automobile: atunci când se face clic pe o mostră de vopsea, poziția fundal a imaginii principale se va schimba, dând iluzia că culoarea vopselei sa schimbat. Sunt încă nou la javascript, dar cred că acesta este cel mai elegant mod de a face acest lucru. Poate cineva să ajute obținerea sintaxei într-un script de lucru real?

definirea css:

#target { 
     background: url("/images/center-stage.jpg") no-repeat; 
     background-position: 0 0;
}

funcția pe fișierul script extern:

function colorChange(x,y)
{
    var x=("x" + px);//i don't get how to format this stuff
    var y=("y" + px);
    document.getElementById("target").style.backgroundPosition="(,)";//this doesn't really go here, does it?
}

și apelurile html:





si asa mai departe.

pentru a face lucrurile mai complicate, există 2 variabile de culoare; la fel cum site-ul mașinii ar avea opțiuni interioare de culoare interioară, acest scenariu trebuie de asemenea să aibă opțiuni de culoare exterioare și interioare (exterior alb sau negru cu 4 culori interioare posibile).

Am crezut că cel mai bun mod de a face acest lucru este să aveți toate opțiunile de exterior pe axa y și toate opțiunile de interior pe axa x, dar trebuie să definiți apelurile astfel încât făcând clic pe roșu, galben, albastru sau verde va deplasa x -să păstrați selecția curentă la fel (și invers)

0

2 răspunsuri

function colorChange(x,y)
        {
            var positionX = x + "px";
            var positionY = y + "px";
            document.getElementById("target").style.backgroundPosition = positionX + " " + positionY;
        }
0
adăugat

Dacă schimbați JS la acest lucru:

function colorChange(x,y) {
    document.getElementById("target").style.backgroundPosition=x+'px '+y+' px'; 
}

Imaginea de fundal va începe să se miște. Motivul pentru care nu funcționa în exemplul dvs.:

function colorChange(x,y)
    {
        var x=("x" + px);//i don't get how to format this stuff
        var y=("y" + px);
        document.getElementById("target").style.backgroundPosition="(,)";//this doesn't really go here, does it?
    }

Este aceasta afirmatie:     var x = ("x" + px);

Acest lucru nu va funcționa deoarece "x" este o variabilă și nu ar trebui să fie citată. De asemenea, "px" este un șir și ar trebui să fie citat, astfel încât declarația să devină:     var x = x + 'px';

Acum, în declarația:     . Document.getElementById ( "țintă") style.backgroundPosition = "(,)";

Puteți seta valoarea direct fără a fi nevoie să folosiți "var x = x +" px "', astfel încât devine:

document.getElementById("target").style.backgroundPosition=x+'px '+y+' px';

De asemenea, doar din curiozitate, folosiți jQuery sau o jQuery tip JS bibliotecă? Pentru că în loc să spună:

document.getElementById("target").style.backgroundPosition=x+' '+y

Poti spune:

$("#target").css('background-position', x+'px '+y+'px');

** EDITAȚI | × **

Pentru a actualiza numai valoarea de care aveți nevoie și nu atât pentru x cât și pentru y: Ei bine, cu CSS, nu există nici o pozitie de fundal-x sau un echivalent. Deci, va trebui să păstrați o variabilă în JS care deține fiecare dintre valorile X și Y. Apoi, funcția de schimbare ar putea actualiza variabila ... și apoi modificați poziția fundalului.

Uită-te la acest cod:

// variable outside of function() scope
var xposition, 
     yposition;

// Update values of xposition and or yposition
function updatePositions(axes) {//Should be {x:0,y:0}
   //Check to see which axis was passed in x, y or both, then update values
     if (typeof(axes.x) !== 'undefined') xposition = axes.x;
     if (typeof(axes.y) !== 'undefined') yposition = axes.y;

//Call function to actually move BG image
colorChange();
}

// Function move BG image, using variables declared above
function colorChange() {
   //Use xposition and yposition which are changed by JS function above
    $("#target").css('background-position', xposition+'px '+yposition+'px');
}

$(document).ready(function() {
    updatePositions({x:0,y:0});//Initialize to starting position
});

Codul {x: 0, y: 0} de mai sus este doar o metodă pe care o folosesc pentru a trece parametrul într-o funcție cu valori multiple.
{} înseamnă un Obiect "Javascript" ... astfel încât să puteți spune acest lucru:

var obj = {};
obj.x = 150;
obj.y = 200;
console.log(obj);

Ieșiri: Obiect {x: 150, y: 200}


HTML (Notați că puteți trece în x și y sau doar x sau doar y)





0
adăugat
multumesc pentru asta! m-am gandit la asta in primul rand, dar cu 24 (si in crestere) optiuni diferite CSS ar incepe sa scape de sub control.
adăugat autor kristina childs, sursa
oh om, opțiunea bibliotecii jQuery a fost mult mai ușoară. mulțumesc eli! deci pentru opțiunile exterioare, există un echivalent JavaScript al "*"? este posibil să se apeleze o modificare la X și nu la Y în html?
adăugat autor kristina childs, sursa
fantastic, eli, ești un salvator! vă mulțumim și pentru că ați acordat timp pentru a explica/de ce/în loc de a posta doar un răspuns
adăugat autor kristina childs, sursa
După ce vă gândiți puțin la acest lucru, puteți lua în considerare utilizarea numelor de clasă pentru a descrie pozițiile de fundal, doar pentru a ușura mentenabilitatea. Deci, pentru fiecare combinație de culori, trebuie să creați o regulă CSS cu poziția de fundal. Apoi puteți aplica regula CSS la <div> în loc de matematică cu JavaScript.
adăugat autor Eli Huntington, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com