Ir para conteúdo
Fórum Script Brasil
  • 0

Animação Em Java Script

eduardoarts

Perguntado por eduardoarts,

 Share

Pergunta

eduardoarts

eduardoarts

Postado
Postado

Tenho uma animação em Java script que, onde a figura se move da direita para a esquerda. Como faço para que a figura vá da esquerda para direita. Segue o código java script abaico:

<!--

// See KB article about changing this dynamic HTML

dynamicanimAttr = "dynamicanimation"

animCancel = "skipanim"

fpanimationPrefix = "fpAnim"

animateElements = new Array()

currentElement = 0

speed = 1

stepsZoom = 8

stepsWord = 8

stepsFly = 17

stepsSpiral = 16

stepsSpiralWord = 19

stepsElastic = 32

steps = stepsZoom

step = 0

cornerPhase=0

outEffect=0

function remSuffix(str)

{

ind=str.indexOf("FP")

str = str.substring(0,ind)

return str

}

function dynAnimOut(el)

{

outEffect=1

dynAnimation(el)

outEffect=0

}

function dynAnimation(obj)

{

animateElements = new Array()

var ms = navigator.appVersion.indexOf("MSIE")

ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)

if(!ie4)

{

if((navigator.appName == "Netscape") &&

(parseInt(navigator.appVersion.substring(0, 1)) >= 4))

doc_els=document.layers

else

return

}

else

doc_els=document.all

if(outEffect && !ie4)

return

if(ie4)

{

for (index=document.all.length-1; index >= document.body.sourceIndex; index--)

{

el = document.all[index]

if(outEffect && el != obj)

continue

if(outEffect)

animationId = el.id.substring(9,el.id.length)

else

animationId = el.id.substring(6,el.id.length)

animation=remSuffix(animationId)

if(null != animation)

{

altcnt=0

if( animation == "dropWord" ||

animation == "flyTopRightWord" ||

animation == "flyBottomRightWord" ||

animation == "waveWords" ||

animation == "hopWords")

{

ih = el.innerHTML

outString = ""

i1 = 0

iend = ih.length

while(true)

{

i2 = startWord(ih, i1)

if(i2 == -1)

i2 = iend

outWord(ih, i1, i2, false, "", outEffect ? obj.id : el.id)

if(i2 == iend)

break

i1 = i2

i2 = endWord(ih, i1)

if(i2 == -1)

i2 = iend

if (animation == "waveWords")

outWordAlt(ih, i1, i2, true, animation, altcnt)

else

outWord(ih, i1, i2, true, (outEffect ? "Out" : "") + animation,

outEffect ? obj.id : el.id)

if(i2 == iend)

break

i1 = i2

altcnt++

}

document.all[index].innerHTML = outString

document.all[index].style.posLeft = 0

document.all[index].setAttribute(animCancel, true)

document.all[index].style.visibility="visible"

}

}

}

}

i = 0

for (index=0; index < doc_els.length; index++)

{

el = doc_els[index]

if(0 != el.id.indexOf(fpanimationPrefix))

continue

if (ie4)

{

elprops=el.style

scrollOffsetTop=document.body.scrollTop

docHeight=document.body.offsetHeight

docWidth=document.body.offsetWidth

elW=100

elH=el.offsetHeight

}

else

{

elprops=el

scrollOffsetTop=window.pageYOffset

docHeight=window.innerHeight

docWidth=window.innerWidth

elW=el.clip.width

elH=el.clip.height

}

if(outEffect)

animationId = el.id.substring(9,el.id.length)

else

animationId = el.id.substring(6,el.id.length)

animation=remSuffix(animationId)

if(outEffect && (obj != el))

{

if(el.SRCID != obj.id)

continue

}

if (null != animation )

{

if(ie4 && null!=el.getAttribute(animCancel, false))

continue

if(!ie4)

{

elprops.posLeft=elprops.left

elprops.posTop=elprops.top

}

el.startL=offsetLeft(el)

if(animation == "flyLeft")

{

elprops.posLeft = -offsetLeft(el)-elW

elprops.posTop = 0

}

else if(animation == "flyRight" || animation=="elasticRight")

{

elprops.posLeft = -offsetLeft(el)+docWidth

elprops.posTop = 0

}

else if(animation == "flyTop" || animation == "dropWord")

{

elprops.posLeft = 0

elprops.posTop = scrollOffsetTop-offsetTop(el)-elH

}

else if(animation == "flyBottom" || animation == "elasticBottom")

{

elprops.posLeft = 0

elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight

}

else if(animation == "flyTopLeft")

{

elprops.posLeft = -offsetLeft(el)-elW

elprops.posTop = scrollOffsetTop-offsetTop(el)-elH

}

else if(animation == "flyTopRight" || animation == "flyTopRightWord")

{

elprops.posLeft = -offsetLeft(el)+docWidth

elprops.posTop = scrollOffsetTop-offsetTop(el)-elH

}

else if(animation == "flyCorner")

{

elprops.posLeft = docWidth*0.2-offsetLeft(el)

elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight

}

else if(animation == "flyBottomLeft")

{

elprops.posLeft = -offsetLeft(el)-elW

elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight

}

else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")

{

elprops.posLeft = -offsetLeft(el)+docWidth

elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight

}

else if(animation == "spiral")

{

elprops.posLeft = -offsetLeft(el)+docWidth

elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight

}

else if((animation.indexOf("waveWords") != -1) || animation=="hopWords")

{

if(i)

{

prevEl=animateElements[i-1]

elprops.r = offsetLeft(el)-prevEl.startL

}

else

elprops.r = offsetLeft(el)

}

else if(animation == "wipeLR" || animation == "wipeMID")

{

if (ie4 && elprops.position=="absolute")

{

el.sizeW=el.offsetWidth

elprops.clip="rect(0 0 0 0)"

}

else if (!ie4)

{

el.sizeW=el.clip.width

el.clip.width=0

}

}

else if(animation == "wipeTB")

{

if (ie4 && elprops.position=="absolute")

{

elprops.clip="rect(0 0 0 0)"

}

else if(!ie4)

{

el.sizeH=el.clip.height

el.clip.height=0

}

}

else if(animation == "zoomIn")

{

elprops.posLeft = 0

elprops.posTop = 0

}

else if(animation == "zoomOut")

{

elprops.posLeft = 0

elprops.posTop = 0

}

else

{

continue

}

if(!outEffect)

{

el.initLeft = elprops.posLeft

el.initTop = elprops.posTop

el.endLeft = 0

el.endTop = 0

elprops.visibility = "hidden"

}

else

{

el.initLeft = 0

el.initTop = 0

el.endLeft = elprops.posLeft

el.endTop = elprops.posTop

elprops.posTop = 0

elprops.posLeft = 0

}

if(!ie4)

{

elprops.left=elprops.initLeft

elprops.top =elprops.initTop

}

animateElements[i++] = el

}

}

if(animateElements.length > 0)

{

if(outEffect)

window.setTimeout("animate(1);", speed, "Javascript")

else

window.setTimeout("animate(0);", speed, "Javascript")

}

}

function offsetLeft(el)

{

if(ie4)

{

x = el.offsetLeft

for (e = el.offsetParent; e; e = e.offsetParent)

x += e.offsetLeft

return x

}

else

{

x = el.pageX

return x

}

}

function offsetTop(el)

{

if(ie4)

{

y = el.offsetTop

for (e = el.offsetParent; e; e = e.offsetParent)

y += e.offsetTop;

return y

}

else

{

y = el.pageY

return y

}

}

function startWord(ih, i)

{

for(tag = false; i < ih.length; i++)

{

c = ih.charAt(i)

if(c == '<')

{

if(ih.substring(i+1, i+4) == "IMG")

return i;

tag = true

}

if(!tag)

return i

if(c == '>')

tag = false

}

return -1

}

function endWord(ih, i)

{

nonSpace = false

space = false

img = false

if(ih.charAt(i) == '<')

{

img = true

i++;

}

while(i < ih.length)

{

c = ih.charAt(i)

if(c != ' ')

nonSpace = true

if(img && c == '>')

img = false;

if(nonSpace && !img && c == ' ')

space = true

if(c == '<')

return i

if(space && c != ' ')

return i

i++

}

return -1

}

function outWord(ih, i1, i2, dyn, anim, srcID)

{

if(dyn)

if(!outEffect)

outString += "<SPAN ID=\"" + fpanimationPrefix + anim + "FP\" style=\"position: relative; visibility: hidden;\">"

else

outString += "<SPAN SRCID=\"" + srcID + "\"ID=\"" + fpanimationPrefix + anim + "FP\" style=\"position: relative;\">"

outString += ih.substring(i1, i2)

if(dyn)

outString += "</SPAN>"

}

function outWordAlt(ih, i1, i2, dyn, anim, altcnt)

{

if(dyn)

{

if(altcnt%2)

outString += "<SPAN ID=\"" + fpanimationPrefix + anim + "LFP\" style=\"position: relative; visibility: hidden;\">"

else

outString += "<SPAN ID=\"" + fpanimationPrefix + anim + "RFP\" style=\"position: relative; visibility: hidden;\">"

}

outString += ih.substring(i1, i2)

if(dyn)

outString += "</SPAN>"

}

function animate(animOut)

{

el = animateElements[currentElement]

if(animOut)

animationId = el.id.substring(9,el.id.length);

else

animationId = el.id.substring(6,el.id.length);

animation=remSuffix(animationId)

if (ie4)

elprops=el.style

else

elprops=el

if(!step && !animOut)

elprops.visibility="visible"

step++

if(animation == "spiral")

{

steps = stepsSpiral

v = step/steps

rf = 1.0 - v

t = v * 2.0*Math.PI

rx = Math.max(Math.abs(el.initLeft), 200)

ry = Math.max(Math.abs(el.initTop), 200)

elprops.posLeft = Math.ceil(-rf*Math.cos(t)*rx)

elprops.posTop = Math.ceil(-rf*Math.sin(t)*ry)

}

else if(animation == "waveWordsL" || animation=="hopWords" || animation == "waveWords")

{

steps = stepsSpiralWord

v = step/steps

rf = (1.0 - v)

t = v * 1.0*Math.PI

elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)

elprops.posTop = Math.ceil(-rf*Math.sin(t)*elprops.r)

}

else if(animation == "waveWordsR")

{

steps = stepsSpiralWord

v = step/steps

rf = (1.0 - v)

t = v * 1.0*Math.PI

elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)

elprops.posTop = Math.ceil( rf*Math.sin(t)*elprops.r)

}

else if(animation == "zoomIn")

{

steps = stepsZoom

elprops.fontSize = Math.ceil(50+50*step/steps) + "%"

elprops.posLeft = 0

}

else if(animation == "zoomOut")

{

steps = stepsZoom

fontSz=Math.ceil(100+200*(steps-step)/steps) + "%"

elprops.fontSize = fontSz

elprops.posLeft = 0

}

else if(animation == "elasticRight")

{

steps = stepsElastic

v = step/steps

rf=Math.exp(-v*7)

t = v * 1.5*Math.PI

rx =Math.abs(el.initLeft)

elprops.posLeft = rf*Math.cos(t)*rx

elprops.posTop = 0

}

else if(animation == "elasticBottom")

{

steps = stepsElastic

v = step/steps

rf=Math.exp(-v*7)

t = v * 2.5*Math.PI

ry =Math.abs(el.initTop)

elprops.posLeft = 0

elprops.posTop = rf*Math.cos(t)*ry

}

else if(animation == "wipeLR")

{

steps = stepsElastic

if(ie4 && elprops.position=="absolute")

elprops.clip = "rect(0 "+ step/steps*100 +"% 100% 0)"

else if (!ie4)

{

elprops.clip.right=step/steps*el.sizeW

}

}

else if(animation == "wipeTB")

{

steps = stepsElastic

if(ie4 && elprops.position=="absolute")

elprops.clip = "rect(0 100% "+step/steps*el.offsetHeight+"px 0)"

else

elprops.clip.bottom=step/steps*el.sizeH

}

else if(animation == "wipeMID")

{

steps = stepsElastic

if(ie4 && elprops.position=="absolute")

{

elprops.clip = "rect(0 "+el.sizeW/2*(1+step/steps)+"px 100% "+el.sizeW/2*(1-step/steps)+")"

}

else if(!ie4)

{

elprops.clip.right=el.sizeW/2*(1+step/steps)

elprops.clip.left=el.sizeW/2*(1-step/steps)

}

}

else if(animation == "flyCorner")

{

if(!cornerPhase)

{

steps = stepsElastic/2

v = step/steps

rf=Math.exp(-v*7)

t = v * 2.5*Math.PI

ry =Math.abs(el.initTop)

elprops.posTop = rf*Math.cos(t)*ry

}

else

{

steps = stepsFly

dl = el.initLeft / steps

elprops.posLeft = elprops.posLeft - dl

elprops.posTop = 0

}

}

else

{

steps = stepsFly

if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")

steps = stepsWord

dl = (el.endLeft - el.initLeft) / steps

dt = (el.endTop - el.initTop) / steps

elprops.posLeft = elprops.posLeft + dl

elprops.posTop = elprops.posTop + dt

}

if (step >= steps)

{

if(!(animation == "wipeLR" ||

animation == "wipeTB" ||

animation == "wipeMID" ||

(animation == "flyCorner" && !cornerPhase)))

{

elprops.posLeft = el.endLeft

elprops.posTop = el.endTop

}

if(animOut)

{

elprops.visibility="hidden"

}

step = 0

if(animation=="flyCorner" && !cornerPhase)

cornerPhase=1

else

{

cornerPhase=0

currentElement++

}

}

if(!ie4)

{

elprops.left=elprops.posLeft

elprops.top =elprops.posTop

}

if(currentElement < animateElements.length)

{

if(animOut)

window.setTimeout("animate(1);", speed, "Javascript")

else

window.setTimeout("animate(0);", speed, "Javascript")

}

else

currentElement=0

}

function rollIn(el)

{

var ms = navigator.appVersion.indexOf("MSIE")

ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)

if(ie4)

{

el.initstyle=el.style.cssText;el.style.cssText=el.fprolloverstyle

}

}

function rollOut(el)

{

var ms = navigator.appVersion.indexOf("MSIE")

ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)

if(ie4)

{

el.style.cssText=el.initstyle

}

}

function clickSwapStyle(el)

{

var ms = navigator.appVersion.indexOf("MSIE")

ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)

if(ie4)

{

ts=el.style.cssText

el.style.cssText=el.fprolloverstyle

el.fprolloverstyle=ts

}

}

function clickSwapImg(el)

{

if(document.all || document.layers)

{

ts=el.src

el.src=el.lowsrc

el.lowsrc=ts

}

}

//-->

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...