Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: Animation problem.

  1. #11
    Join Date
    Feb 2007
    Posts
    601
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <html>
    <head>
    <title></title>
    </head>
    <body onload="startanime()" onunload="clearTimeout(t1)">
    <span id="animatedtext" style="position: absolute; top: 1px; left: 1px;">Customize here</span>
    <script type="text/javascript">
    var FromLeft = 100
    var FromTop = 50
    var curx = 0
    var cury = 0
    var call = document.getElementById('animatedtext')
    var t1
    
    function startanime() {
    
    if (curx<FromLeft && cury==FromTop) {
    curx++
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx>FromLeft && cury==FromTop) {
    curx--
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    if (cury<FromTop && curx==FromLeft) {
    cury++
    call.style.top=cury
    t1=setTimeout("startanime()", 5)}
    
    else if (cury>FromTop && curx==FromLeft) {
    cury--
    call.style.top=cury
    t1=setTimeout("startanime()", 5)}
    
    if (curx<FromLeft && cury<FromTop) {
    curx++
    cury++
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx>FromLeft && cury<FromTop) {
    curx--
    cury++
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx<FromLeft && cury>FromTop) {
    curx++
    cury--
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx>FromLeft && cury>FromTop) {
    curx--
    cury--
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    }
    </script>
    </body>
    </html>
    This script should do the trick... -

    curx (sets starting x position)
    cury (sets starting y position)
    FromLeft (sets ending x position)
    FromTop (sets ending y position)
    Last edited by tech_support; 04-22-2007 at 06:43 AM.

  2. #12
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    pcbrainbuster: That's almost what I wanted except that I want it as a function where you can pass the coordinates as arguments.

  3. #13
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Quote Originally Posted by pcbrainbuster View Post
    HTML Code:
    <html>
    <head>
    <title></title>
    </head>
    <body onload="startanime()" onunload="clearTimeout(t1)">
    <span id="animatedtext" style="position: absolute; top: 1px; left: 1px;">Customize here</span>
    <script type="text/javascript">
    var FromLeft = 100
    var FromTop = 50
    var curx = 0
    var cury = 0
    var call = document.getElementById('animatedtext')
    var t1
    
    function startanime() {
    
    if (curx<FromLeft && cury==FromTop) {
    curx++
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx>FromLeft && cury==FromTop) {
    curx--
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    if (cury<FromTop && curx==FromLeft) {
    cury++
    call.style.top=cury
    t1=setTimeout("startanime()", 5)}
    
    else if (cury>FromTop && curx==FromLeft) {
    cury--
    call.style.top=cury
    t1=setTimeout("startanime()", 5)}
    
    if (curx<FromLeft && cury<FromTop) {
    curx++
    cury++
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx>FromLeft && cury<FromTop) {
    curx--
    cury++
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx<FromLeft && cury>FromTop) {
    curx++
    cury--
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    else if (curx>FromLeft && cury>FromTop) {
    curx--
    cury--
    call.style.top=cury
    call.style.left=curx
    t1=setTimeout("startanime()", 5)}
    
    }
    </script>
    </body>
    </html>
    This script should do the trick... -

    curx (sets starting x position)
    cury (sets starting y position)
    FromLeft (sets ending x position)
    FromTop (sets ending y position)
    Coding with a valid DOCTYPE would be better
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •