Forum Mjukvara Programmering och digitalt skapande Tråd

Javascript - rotera en bild, variabel fungerar inte i funktion

1
Skriv svar
Permalänk
Medlem
●

Javascript - rotera en bild, variabel fungerar inte i funktion

Hej
Jag vill att en bild ska rotera när man trycker på en knapp och har lyckats med det med denna kod

<html>
<body style="background-color:#6d84a2">
<img name="winky" src="http://www.walterzorn.com/images/wink.gif" width="15" height="15">
<a href="javascript:void(0)" onclick="if (window.rots) {ang = 0; Roll(-10,-90);}">roll</a>
<script type="text/javascript" src="http://www.walterzorn.com/scripts/wz_rotateimg.js"></script>
<script type="text/javascript">
<!--
SET_ROTATABLE("winky", 0);
var ang = 0;
function Roll(rStep,rStop){
//alert(rStep + " " + rStop);
var rStep = -10;
var rStop = -90;
    rots.winky.rotateTo(ang += rStep);
    if(rStep>rStop){
        if (ang > rStop) setTimeout('Roll()', 50);
    }
    else{
        if (ang < rStop) setTimeout('Roll()', 50);
    }
}
//-->
</script>
</body>
</html>

Det finns däremot outnyttjade saker i ovanstående kod
På rad 4 finns anropet till funktionen Roll(). Där försöker jag skicka med -10,-90.
Detta ska sedan användas i funktionen har jag tänkt som rStep,rStop. Det jag vill åstadkomma är att kunna bestämma med hur många steg (rStep) bilden skall rotera i taget samt när den är ska stanna (rStop). Med -10,-90 så ska den gå -10 steg (baklänges) i taget tills den kommit till -90. Den går alltså 9ggr.
Jag har kollat med alert att dessa följer med funktionen (rad 11) och det gör dem genom första loopen.
Att dem inte följer med till andra loopen verkade logiskt när jag inte skickar med dessa variabler i Roll() på rad 16 och 19. Så om jag sätter Roll() till Roll(rStep,rStop) borde det ha fungerat tyckte jag, men icke. Får felmeddelandet att rStep är odefinierat!?!?
Iofs så borde man inte behöva skicka med rStep och rStop i Roll på rad 16 och 19 för dem är ju inte med definierar rStep och rStop manuellt som jag gjort på rad 12 och 13

Nu har jag inga mer ideer så jag hoppas på hjälp från nån kunnig?

MVH Niclas

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av skorpion 

function Roll(rStep,rStop){
//alert(rStep + " " + rStop);
var rStep = -10;
var rStop = -90;
    rots.winky.rotateTo(ang += rStep);
    if(rStep>rStop){
        if (ang > rStop) setTimeout('Roll()', 50);
    }
    else{
        if (ang < rStop) setTimeout('Roll()', 50);
    }
}

På första raden ovan har du definierat att funktionen Roll ska ta två argument, rStep och rStop. I direkt anknytning till detta omdefinierar du dessa variabler till statiska värden istället.. och sedan anropar du Roll() utan några argument alls. Det låter ju lite tokigt. Du behöver en extern variabel som specifierar rotation och ökas successivt tills den nått ditt önskade värde; det är detta som ang används till. Den simplaste lösningen borde således vara att ange två variabler till: målvärde och antal steg:

function Roll()
{
    ang += angTarget / angSteps;
    rots.winky.rotateTo(ang);
    if (Math.abs(ang) < Math.abs(angTarget)) setTimeout('Roll()', 50);
}

Anropa med onclick="if (window.rots) {ang = 0; angTarget=-90; angSteps=9; Roll();}"

edit: sen är det ingenting du bör använda för att rotera bilder då det skapar en sjujädrans massa div-element, men det kan vara kul att experimentera med.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för hjälpen
Dem fasta värdena var bara där för att få funktionen att fungera när jag testade lite.
Som du säger så är det tydligen inte bra att använda då det verkade ta upp för mkt kraft.

Jag letade vidare och hittade bättre alternativ (och mkt enklare)

<html>

<body>
<img id="warn" style="-webkit-transition: -webkit-transform 0.1s ease-in" onclick="this.style.webkitTransform='rotate(-90deg)'" src="http://skorpion.se/tellit/iui/removewarn.png">

<script type="text/javascript">
document.write(document.getElementById('warn').style.webkitTransform.value);
</script>
</body>
</html>

Detta fungerar bara med Safari (webkit) med det är helt ok för mig.

En sak som jag däremot vill få till är att läsa av vilken vinkel bilden har för tillfället.
Jag trodde det skulle fungera med typ:
document.getElementById('warn').style.webkitTransform.value;
Med det ger ifrån sig undefined

Nåt jag missat?
/Niclas

Redigera
Citera flera Citera
Permalänk
Medlem
●

Fick till det själv tillslut genom att sätta en till variabel samtidigt som jag satte "rotate"
Sedan bakade jag in en if-sats i onclick=

resultatet:
<img id="warn" style="-webkit-transition: -webkit-transform 0.1s ease-in" onclick="if(typeof(a)=='undefined' || a==0){ this.style.webkitTransform='rotate(-90deg)'; a=1;} else{this.style.webkitTransform='rotate(0deg)'; a=0;}" src="http://skorpion.se/tellit/iui/removewarn.png">

För er som inte inte använder safari så gör detta att en bild roterar -90* under 0.1s
Nästa tryck på samma bild roterar bilden till 0* under 0.1s

Tack å hej!

Redigera
Citera flera Citera
1
Skriv svar