Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
asworm

mover de imagens

Recommended Posts

asworm

Boas... estou por aqui porque entretanto comecei a estudar javaScript, e tenho a seguinte duvida...

tenho uma imagem e queria que ela se movesse, ja tentei de tudo mas nao consigo chegar la...

document.img1.style.left=1000+"px";

tenho uma alert antes desta instrição e devolve sempre 100px...

gostava de saber porque razão nao está a atribuir o valor pretendido...


Got it?

Share this post


Link to post
Share on other sites
asworm

e se o img1 ja for o id?

é que eu declarei o img1 como o id e nao como name para nao ter de usar o getelementbyid... mas secalhar tou a fazer mal...


Got it?

Share this post


Link to post
Share on other sites
asworm

imagina que crias que essa imagem tivesse um efeito de movimento...

como o farias?

id="img1" name="moldura1"

desculpa a pergunta mas estou mesmo encrencado


Got it?

Share this post


Link to post
Share on other sites
yoda

Encontrei este link

http://www.jsmadeeasy.com/javascripts/Image%20Effects/Image-Runner/template.htm

Atenta no código usado, não sei se é esse o movimento que queres, mas basicamente crias uma função que faça andar a imagem x pixels para a direcção que queiras, e chamas a função as vezes que forem precisas até atingires o destino

Share this post


Link to post
Share on other sites
asworm

estas a ver o site dos system of a down?

www.systemofadown.com

clicas em entrar e tal e quando mudas de separador uma imagem de fundo movimenta-se...

era isso mais ou memos, ,dar uma sensacao de movimento...

vou ver agora o link que me mandas-te


Got it?

Share this post


Link to post
Share on other sites
asworm

tipo...

a imagem mexe-se...

é isto que quero... mas nao percebo a programacao que la esta...

é tudo bué esquesito...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<script>
<!-- Beginning of JavaScript -

// CREDITS:
// Image-Runner by Urs Dudli and Peter Gehrig
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.ch.
// info@24fun.ch
// 2/10/2000

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.24fun.ch on the webpage
// where this script will be running.

// CONFIGURATION:
// You need only one image besides the script. You don't have
// to slice the image yourself! The script will do this job for you.
// Configure the script as follows:
// 1. 	Copy and paste the two script-blocks into your HTML-file:
// 		The first script-block should be inside the head-zone of your HTML-file.
//		The second script-block should be inside the body-zone.
// 2.	Put your image in the same directory as the HTML-file.
// 3. 	Configure the variables below:

// The width of your image (pixels)
var imgwidth=500

// The height of your image (pixels)
var imgheight=200

// The URL of the sliced image
var imgurl="ny9200.jpg"

// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=5

// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=5

// Number of slices
var imgslices=20

// Speed of slices
var step=50
var pause=20

// Do not change the variables below
var marginright
var width_slice=Math.floor(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice
var spannummer=0
var spannrbefore=0

function initiate() {
if (document.all) {
	moveslices_IE()
}
}

function moveslices_IE() {
var thisspan=eval("document.all.span"+spannummer+".style")
if (thisspan.posLeft>x_finalpos-width_slice) {
	thisspan.posLeft-=step
	var timer=setTimeout("moveslices_IE()",pause)
}
else if (spannummer<imgslices-1) {
	clearTimeout(timer)
	thisspan.posLeft=x_finalpos
	spannummer++
	var timer=setTimeout("moveslices_IE()",pause)
}
else {
	thisspan.posLeft=x_finalpos
	clearTimeout(timer)
}
}

// - End of JavaScript - -->
</script>
<body>
<body  onLoad="initiate()">

<script>
<!-- Beginning of JavaScript -
for (i=0;i<=imgslices-1;i++) {
marginright=screen.width+50
    document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
document.write("<img src='"+imgurl+"'>")
    document.write("</span>")
clipleft+=width_slice
clipright+=width_slice
}
// - End of JavaScript - -->
</script>
<p>
</body>

</html>

será queé preciso isto tudo para mudar a posicao da imagem?


Got it?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.