【实例名称】
textarea内实现行的翻页效果
【实例描述】
textareaa中内容太多时,会出现滚动条,以支持对内容的浏览。本例学习如何通过两个按钮,实现行的上下滚动。
【实例代码】
<html> <head> <title>表格显示数据表记录</title> </head> <body> <textarea id=myTxt style="overflow:hidden" width="20" height="20"> 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据
</textarea> <button onmouseup=stop() onmousedown=up()>上翻</button><button onmousedown=down() onmouseup=stop()>下翻</button> <script> var Timer=null; function up() {myTxt.doScroll("scrollBardown") //调用滚动条,实现上翻 Timer=setTimeout("up()",100) } function down() {myTxt.doScroll("scrollBarUp") //调用滚动条,实现下翻 Timer=setTimeout("down()",100) } function stop() {clearTimeout(Timer)} //清空定时器 </script> </body> </html>
【运行效果】
【难点剖析】
本例中使用了textarea中的“doscroII”方法,以实现滚动条的手动拖动效果。其中“scrollBardown”表示将滚动条向上翻,“scrollBarup”表示将滚动条向下翻。
【源码下载】
本实例JS代码下载
……