Discuz教程网

js 动态文字滚动的例子

[复制链接]
authicon 09927306 发表于 2011-1-18 12:44:07 | 显示全部楼层 |阅读模式
在文本框中动态滚动文字的例子,需要的朋友可以参考下。
代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>这是一个动态JavaScript文字显示的例子</title>
  5. <script type="text/JavaScript">
  6. var POSITION = 50;
  7. var DELAY = 150;
  8. var MESSAGE = "这是一个动态JavaScript文字显示的例子";
  9. function bannerObject(){
  10. this.msg = MESSAGE;
  11. this.out = " ";
  12. this.pos = POSITION;
  13. this.delay = DELAY;
  14. this.i = 0;
  15. this.reset = clearMessage;
  16. }
  17.  
  18. function clearMessage(){
  19. this.pos = POSITION;
  20. }
  21. var scroll = new bannerObject();
  22. function scroller(){
  23. scroll.out += " ";
  24. if(scroll.pos>0)
  25. for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++){
  26. scroll.out +=" " ;
  27. }
  28. if (scroll.pos>= 0)
  29. scroll.out += scroll.msg;
  30. else
  31. scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length);
  32. document.noticeForm.notice.value = scroll.out;
  33. scroll.out = " ";
  34. scroll.pos--;
  35. scroll.pos--;
  36. if (scroll.pos < -(scroll.msg.length)) {
  37. scroll.reset();
  38. }
  39. window.setTimeout("scroller()", scroll.delay);
  40. }
  41. </script>
  42. </head>
  43. <body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0">
  44. <table border="0" cellspacing="0" cellpadding="0">
  45. <tr><td width="100%">
  46. <form name="noticeForm" action="">
  47. <p><input type="text" name="notice" size="50" style="background-color: rgb(192,192,192)"/></p>
  48. </form>
  49. </td></tr>
  50. </table>
  51. </body>
  52. </html>
复制代码

在状态栏滚动文字
代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>这是一个跑马灯效果的JavaScript文档-在状态栏</title>
  5. <script type="text/JavaScript">
  6. var msg = "这是一个跑马灯效果的JavaScript文档";
  7. var interval = 100;
  8. var spacelen = 120;
  9. var space10 = " ";
  10. var seq = 0;
  11. function Scroll() {
  12. len = msg.length;
  13. window.status = msg.substring(0, seq + 1);
  14. seq++;
  15. if (seq >= len) {
  16. seq = spacelen;
  17. window.setTimeout("Scroll2();", interval);
  18. }
  19. else
  20. window.setTimeout("Scroll();", interval);
  21. }
  22. function Scroll2() {
  23. var out = "";
  24. for (i = 1; i <= spacelen / space10.length; i++)
  25. out +=space10;
  26. out = out + msg;
  27. len = out.length;
  28. window.status = out.substring(seq, len);
  29. seq++;
  30. if (seq >= len) { seq = 0; };
  31. window.setTimeout("Scroll2();", interval);
  32. }
  33. Scroll();
  34. </script>
  35. </head>
  36. <body>
  37. </body>
  38. </html>
复制代码






上一篇:js的写法基础分析
下一篇:JavaScript中的Array对象使用说明
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-6-19 11:00

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表