Переместить текст с помощью javascript

Question

Так что мне нужна функция, подобная этой, -link-, но просто для перемещения текста вверх, а не слева. Как достичь этого?

Таким образом, это код, который перемещает текст слева:

//Text fade 
var bgcolor; 
var fcolor; 
var heading; 

//Number of steps to fade 
var steps; 

var colors; 
var color = 0; 
var step = 1; 

var interval1; 
var interval2; 


//fade: fader function 
// Fade from backcolor to forecolor in specified number of steps 
function fade(headingtext,backcolor,forecolor,numsteps) { 
    if (color == 0) { 
     steps = numsteps; 
     heading = "<font color='{COLOR}'>"+headingtext+"</strong></font>"; 
     bgcolor = backcolor; 
     fcolor = forecolor; 
     colors = new Array(steps); 
     getFadeColors(bgcolor,fcolor,colors); 
    } 

    // insert fader color into message 
    var text_out = heading.replace("{COLOR}", colors[color]); 

    // write the message to the document 
    document.getElementById("fader").innerHTML = text_out; 

    // select next fader color 
    color += step; 

    if (color >= steps) clearInterval(interval1); 
} 

//getFadeColors: fills colors, using predefined Array, with color hex strings fading from ColorA to ColorB 
//Note: Colors.length equals the number of steps to fade 
function getFadeColors(ColorA, ColorB, Colors) { 
    len = Colors.length; 

    //Strip '#' from colors if present 
    if (ColorA.charAt(0)=='#') ColorA = ColorA.substring(1); 
    if (ColorB.charAt(0)=='#') ColorB = ColorB.substring(1); 

    //Substract red green and blue components from hex string 
    var r = HexToInt(ColorA.substring(0,2)); 
    var g = HexToInt(ColorA.substring(2,4)); 
    var b = HexToInt(ColorA.substring(4,6)); 
    var r2 = HexToInt(ColorB.substring(0,2)); 
    var g2 = HexToInt(ColorB.substring(2,4)); 
    var b2 = HexToInt(ColorB.substring(4,6)); 

    // calculate size of step for each color component 
    var rStep = Math.round((r2 - r)/len); 
    var gStep = Math.round((g2 - g)/len); 
    var bStep = Math.round((b2 - b)/len); 

    // fill Colors array with fader colors 
    for (i = 0; i < len-1; i++) { 
     Colors[i] = "#" + IntToHex(r) + IntToHex(g) + IntToHex(b); 
     r += rStep; 
     g += gStep; 
     b += bStep; 
    } 
    Colors[len-1] = ColorB; // make sure we finish exactly at ColorB 
} 

//IntToHex: converts integers between 0 - 255 into a two digit hex string. 
function IntToHex(n) { 
    var result = n.toString(16); 
    if (result.length==1) result = "0"+result; 
    return result; 
} 

//HexToInt: converts two digit hex strings into integer. 
function HexToInt(hex) { 
    return parseInt(hex, 16); 
} 

var startwidth = 0; 

//scroll: Make the text scroll using the marginLeft element of the div container 
function scroll(startw) { 
    if (startwidth == 0) { 
     startwidth=startw; 
    } 

    document.getElementById("fader").style.marginLeft = startwidth + "px"; 

    if (startwidth > 1) { 
     startwidth -= 1;  
    } else { 
     clearInterval(interval2); 
    } 
} 

function fadeandscroll(txt,color1,color2,numsteps,fademilli,containerwidth,scrollmilli) { 
    interval1 = setInterval("fade('"+txt+"','"+color1+"','"+color2+"',"+numsteps+")",fademilli); 
    interval2 = setInterval("scroll("+containerwidth+")",scrollmilli); 
} 

Answer 1

Нечто подобное, кажется, что вы хотите, но JQuery было бы проще.
Демо:Vertical Marquee Demo

window.document.addEventListener("DOMContentLoaded", function() 
{ 
    var elm = window.document.querySelectorAll("#display span")[0], height = elm.parentNode.offsetHeight; 
     elm.style.position = "relative"; 
     elm.style.top = "0px"; 

    var timer = setInterval(function() 
    { 
     var top = Number(elm.style.top.replace(/[^\d\-]/g, '')); 
      top = top > -height ? top - 1 : height; 

     elm.style.top = top + "px"; 
    }, 50); 

    /* 
    * If you want to stop scrolling, call clearInterval(timer); 
    * 
    * Example set to stop when clicked. 
    */ 

    elm.addEventListener("click", function() 
    { 
     clearInterval(timer); 
    }, false); 
}, false);