JS實(shí)現(xiàn)窗體滾動(dòng)條隨文字增加自動(dòng)滾動(dòng)

2012/11/9 19:07:16作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

【實(shí)例描述】

當(dāng)窗體中的內(nèi)容超過(guò)窗體寬度時(shí)，默認(rèn)會(huì)出現(xiàn)窗體的滾動(dòng)條。但如果要在窗口中輸入文本，且長(zhǎng)度超過(guò)了窗體的寬度時(shí)，滾動(dòng)條不一定隨正在輸入的文本自動(dòng)滾動(dòng)。本例的目的就是讓滾動(dòng)條跟隨文本增加一起滾動(dòng)。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂(yōu)（yzddtk.cn）</title>
</head>
<script>
var txtMsg = "往右";                
//要顯示的文本
                                    
//動(dòng)態(tài)創(chuàng)建span標(biāo)簽
var text = document.createElement("<span 
style=position:absolute;z-index:3;font:12;left:10;top:10></span>");
var stat =true;
function writeText()
{
 text.innerText = txtMsg;        
//顯示文本
 txtMsg += "繼續(xù)往右";           
//連接文本內(nèi)容
 div1.appendChild(text);         
//將文本添加到div中
 window.setTimeout("writeText()",400);
//設(shè)置定時(shí)器,不間斷顯示文本
if (stat) {window.scrollTo(10000,0);}
//主要控制滾動(dòng)條的位置
}
document.onmousedown = function(){stat = false;}
</script>
<body onload="writeText()">
<div id=div1 style=position:absolute;top:20;
left:20;width:10000;cursor:default>
</div>
</body>
</html>

【運(yùn)行效果】

窗體滾動(dòng)條隨文字增加自動(dòng)滾動(dòng)運(yùn)行效果