软件学堂

网游分类软件分类

JS实现窗体滚动条随文字增加自动滚动

2012-11-09 来源:网络

【实例名称】

JS实现窗体滚动条随文字增加自动滚动

【实例描述】

当窗体中的内容超过窗体宽度时,默认会出现窗体的滚动条。但如果要在窗口中输入文本,且长度超过了窗体的宽度时,滚动条不一定随正在输入的文本自动滚动。本例的目的就是让滚动条跟随文本增加一起滚动。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> </head> <script> var txtMsg = "往右";                //要显示的文本                                     //动态创建span标签 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 += "继续往右";           //连接文本内容  div1.appendChild(text);         //将文本添加到div中  window.setTimeout("writeText()",400); //设置定时器,不间断显示文本 if (stat) {window.scrollTo(10000,0);} //主要控制滚动条的位置 } 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>

【运行效果】

 窗体滚动条随文字增加自动滚动运行效果

【难点剖析】

本例的重点是对滚动条位置的设置。“window.scrollTo”方法用来设置窗体中滚动条的位置,其自带两个参数,参数一表示x轴的偏移量;参数二表示y轴的偏移量。

【源码下载】

为了JS代码的准确性,请点击:JS实现窗体滚动条随文字增加自动滚动 进行本实例源码下载 

上一篇:笔记本屏幕亮度怎么调
下一篇:调制解调器是什么,有什么作用

相关文章