Question

我正在开发一个小应用程序（phonegap），当用户按下音频按钮同时收听文本时，它会滚动书页。一般的想法： - ）

我已经查看了Marquee版本，到目前为止有效但它有一些奇怪的行为：

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

从上到下幻灯片文本（书页）

0 个答案: