javascript - テキスト（本のページ）を上から下にスライド

Question

ユーザーがオーディオボタンを押して同時にテキストを聞くと、本のページをスクロールする小さなアプリケーション (phonegap) に取り組んでいます。一般的な考え方:-)

これまでのところ動作するマーキー バージョンを調べましたが、奇妙な動作がいくつかあります。

<marquee behavior="scroll" height="100%" vspace="0%" direction="up" id="mymarquee" scrollamount="3" scolldelay="1000" loop="1"> TEXT HERE </marquee> 

"id="mymarquee" がオーディオ再生ボタンに接続されている. これは機能しますが、彼らが言うように推奨されません. JavaScript バージョンを使用する方が良い. だから私はこれまでウェブでクールなバージョンを見つけました, しかし、それは右から左.今、私は世界で最高のプログラマーではないので、誰かが下のスクリプトを調整して、それに方向性を追加できるようにするのを手伝ってくれるかどうか疑問に思っていました.この方法では、スクリプトは多機能になります (他の人にも)上から下にスクロールするだけです。

HTML部分は次のとおりです。

<script src="js/slideandfade.js" type="text/javascript"></script>

<DIV ID="fader" STYLE="text-align:right;"></DIV>

<SCRIPT TYPE="text/javascript">
fadeandscroll('TEXT HERE', '#676F77', '#DFF5FF', 40, 70, 250, 10); 
</SCRIPT>

そして、これはslideandfade.jsです

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