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

用javascript移动文本

1 个答案: