Avatar billede dael Nybegynder
20. maj 2008 - 20:56 Der er 15 kommentarer og
2 løsninger

Move / Tween images

Skal bruge lidt hjælp til noget move/tween

Et billede der har start position ved hjælp af x og y koordinater, når man trykker på billeder skal billede bevæg sig til den nye position og når billede når sin slut position skal der startes en ny side.

Det er nemt at lave det i Flash, men desværre er jeg tvunget til at lave det i Java, som ikke helt er min force. 

Håber nogen kan hjælpe mig, på forhånd tak.
Avatar billede w13 Novice
21. maj 2008 - 08:03 #1
Skal det laves i Java eller JavaScript? Det er 2 vidt forskellige sprog nemlig.

Og er den en lige linje, som billedet skal bevæge sig i?
Avatar billede dael Nybegynder
21. maj 2008 - 08:36 #2
Det skal både være i en lige linje og diagonal. Det skal være i JavaScript
Avatar billede w13 Novice
21. maj 2008 - 09:47 #3
Nu er JavaScript jo ikke beregnet til at foretage den slags bevægelser, så det ser lige så godt ud, som når man gør det i Flash, men denne kode skulle gøre tricket:
************************************
<html>
<head></head>
<body>

<img id="test" style="position:absolute;top:100px;left:50px" src="test.gif">

<script type="text/javascript">
function MovePic(){
    var oPic=document.getElementById("test");
    var iPicX=500;
    var iPicY=650;
    var iSpeed=2;
    var sURL="nyside.html";

    if(oPic.offsetLeft>=iPicX&&oPic.offsetTop>=iPicY){
        window.location.href=sURL;
        return
    }

    if(oPic.offsetLeft<iPicX)oPic.style.left=oPic.offsetLeft+iSpeed;
    if(oPic.offsetTop<iPicY)oPic.style.top=oPic.offsetTop+iSpeed;

    window.setTimeout("MovePic()",100);
}
MovePic();
</script>

</body>
</html>
Avatar billede w13 Novice
21. maj 2008 - 14:33 #4
Eller noget mere glidende:

<html>
<head></head>
<body>

<img id="test" style="position:absolute;top:100px;left:50px" src="test.gif">

<script type="text/javascript">
var oPic=document.getElementById("test");
var sURL="nyside.html";

var iPicX=500;
var iPicY=650;

var iSpeed=10;

var iSpeedX=iPicX-oPic.offsetLeft,iSpeedY=iPicY-oPic.offsetTop;
if(iSpeedX>iSpeedY){iSpeedY=iSpeedX/iSpeedY;iSpeedX=1}else{iSpeedX=iSpeedY/iSpeedX;iSpeedY=1}
iSpeedX=iSpeedY*=iSpeed;

function MovePic(){
    if(oPic.offsetLeft>=iPicX&&oPic.offsetTop>=iPicY)window.location.href=sURL;

    oPic.style.left=oPic.offsetLeft+iSpeedX;
    oPic.style.top=oPic.offsetTop+iSpeedY;

    window.setTimeout("MovePic()",100);
}
MovePic();
</script>

</body>
</html>
Avatar billede dael Nybegynder
21. maj 2008 - 15:10 #5
Super... hvordan skal jeg kode hvis denne tween skal ske når man trykker på billedet
Avatar billede roenving Novice
21. maj 2008 - 17:19 #6
Fjern MovePic()- kaldet sidst i script-blokken og sæt det på billedet i stedet:

<html>
<head></head>
<body>

<img id="test" style="position:absolute;top:100px;left:50px" src="test.gif" onclick="MovePic(this)">

<script type="text/javascript">
var sURL="nyside.html";

var iPicX=500;
var iPicY=650;

var iSpeed=10;
var oPic, iSpeedX, iSpeedY;

function MovePic(obj){
if(obj){
  oPic = obj;
  iSpeedX=iPicX-oPic.offsetLeft,iSpeedY=iPicY-oPic.offsetTop;
  if(iSpeedX>iSpeedY)
    iSpeedY=iSpeedX/iSpeedY;iSpeedX=1;
  else
    iSpeedX=iSpeedY/iSpeedX;iSpeedY=1;
  iSpeedX=iSpeedY*=iSpeed;
}
else if(!oPic)
  return;

    if(oPic.offsetLeft>=iPicX&&oPic.offsetTop>=iPicY)window.location.href=sURL;

    oPic.style.left=oPic.offsetLeft+iSpeedX;
    oPic.style.top=oPic.offsetTop+iSpeedY;

    window.setTimeout("MovePic()",100);
}
</script>

</body>
</html>
Avatar billede roenving Novice
21. maj 2008 - 17:21 #7
I øvrigt er det heller ikke svært i Java, men da det jo er et fuldstændigt anderledes sprog end den Javascript-kategori, du har placeret spørgsmålet i, er et jo nok det ovenstående, du søger !-)
Avatar billede dael Nybegynder
21. maj 2008 - 17:59 #8
roenvig. Tak, men kan ikke helt få det til at virke. fjer MovePic() ???
Avatar billede w13 Novice
21. maj 2008 - 18:02 #9
Du manglede lige nogle klammer ved din if(iSpeedX>iSpeedY), Roenving:

<html>
<head></head>
<body>

<img id="test" style="position:absolute;top:100px;left:50px" src="test.gif" onclick="MovePic(this)">

<script type="text/javascript">
var sURL="nyside.html";

var iPicX=500;
var iPicY=650;

var iSpeed=10;
var oPic, iSpeedX, iSpeedY;

function MovePic(obj){
if(obj){
  oPic = obj;
  iSpeedX=iPicX-oPic.offsetLeft,iSpeedY=iPicY-oPic.offsetTop;
  if(iSpeedX>iSpeedY){
    iSpeedY=iSpeedX/iSpeedY;iSpeedX=1;
  }else{
    iSpeedX=iSpeedY/iSpeedX;iSpeedY=1;
  }
  iSpeedX=iSpeedY*=iSpeed;
}
else if(!oPic)
  return;

    if(oPic.offsetLeft>=iPicX&&oPic.offsetTop>=iPicY)window.location.href=sURL;

    oPic.style.left=oPic.offsetLeft+iSpeedX;
    oPic.style.top=oPic.offsetTop+iSpeedY;

    window.setTimeout("MovePic()",100);
}
</script>

</body>
</html>
Avatar billede w13 Novice
21. maj 2008 - 18:22 #10
dael>> Ja, bare brug den kode, jeg postede sidst. Han havde lige glemt et par tegn.
Avatar billede dael Nybegynder
21. maj 2008 - 21:41 #11
W13: De 60 point er dine. Jeg må dog indrømme at din tween (kode) er meget staccato. Jeg fandt dog denne her på nettet tween.js link: http://jstween.blogspot.com/ som er super glidende! Dog kan jeg ikke helt få dit script flettet inde så den hopper vidre til et ny adresse når billedet når sin slut koordinationer.  Måske kan du se min/mine fejl

Tak for hjælpen!

<html>
<head>
<script language="javascript" src="Tween.js"></script>
<script language="javascript">

function MovePic(obj){

var sURL="nyside.html";
dummy_mc = document.getElementById('dummy');
zz = new Tween(dummy_mc.style,'left','',parseInt(dummy_mc.style.left),10,1,'px');
zzz = new Tween(dummy_mc.style,'top','',parseInt(dummy_mc.style.top),10,1,'px');

        if(!obj) {
        var x = 300;
        var y = 300;
        var duration = 2;
        var easingFunc = eval('Tween.regularEaseOut');
        isNaN(duration) ? duration = 1 : null;
        zz.func = easingFunc;
        zz.continueTo(x,duration);
        zzz.func = easingFunc;
        zzz.continueTo(y,duration);
        }
       
    // ved ikke helt hva' jeg skal skrive her!   
    //else if(!obj)
        //return;
            //if(x>=300&&y>=300)window.location.href=sURL;

    window.setTimeout("MovePic()",500);
}

</script>
</head>
<body>
<img id="dummy" style="position:absolute;top:100px;left:50px" src="test.jpg" onclick="MovePic(this)">
</body>
</html>
Avatar billede w13 Novice
22. maj 2008 - 08:10 #12
Ja, staccato-effekten er en blanding af, hvad man sætter speed til og hvilket tal man sætter i setTimeout. JavaScript vil altid være en smule staccato.

Hvad med at rette:
if(x>=300&&y>=300)window.location.href=sURL;
til:
if(dummy_mc.offsetTop>=y&&dummy_mc.offsetLeft>=y)window.location.href=sURL;

Hvis dét ikke virker, ved jeg det ikke, for så skal der bruges ting fra den JS-fil, du ikke viser indholdet fra.
Avatar billede w13 Novice
23. maj 2008 - 11:25 #13
:)
Avatar billede roenving Novice
23. maj 2008 - 14:16 #14
>>w13

Tuborger er overflødige i javascript-syntaks (men omvendt ikke forbudt !-), hvis det, de skulle omklamre, kan skrives i et enkelt statement (gælder såvidt jeg ved dog ikke funktions-definitioner !-)
Avatar billede w13 Novice
23. maj 2008 - 14:18 #15
roenving >> Ja, og nu var statements'ene altså: iSpeedY=iSpeedX/iSpeedY;iSpeedX=1;
Dvs. 2 statements skrevet på én linje. ;)
Avatar billede roenving Novice
23. maj 2008 - 14:39 #16
Det er zq da også snyd <,~]
Avatar billede w13 Novice
23. maj 2008 - 14:40 #17
Ja, det er hax for at narre fjenden. (Ikke dig! ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester