CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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.

Synes godt om

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?

Synes godt om

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

Synes godt om

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>

Synes godt om

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>

Synes godt om

dael Nybegynder

21. maj 2008 - 15:10 #5

Super... hvordan skal jeg kode hvis denne tween skal ske når man trykker på billedet

Synes godt om

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>

Synes godt om

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 !-)

Synes godt om

dael Nybegynder

21. maj 2008 - 17:59 #8

roenvig. Tak, men kan ikke helt få det til at virke. fjer MovePic() ???

Synes godt om

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>

Synes godt om

w13 Novice

21. maj 2008 - 18:22 #10

dael>> Ja, bare brug den kode, jeg postede sidst. Han havde lige glemt et par tegn.

Synes godt om

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>

Synes godt om

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.

Synes godt om

w13 Novice

23. maj 2008 - 11:25 #13

Synes godt om

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 !-)

Synes godt om

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. ;)

Synes godt om

roenving Novice

23. maj 2008 - 14:39 #16

Det er zq da også snyd <,~]

Synes godt om

w13 Novice

23. maj 2008 - 14:40 #17

Ja, det er hax for at narre fjenden. (Ikke dig! ;)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS