zoukankan      html  css  js  c++  java
  • 文字滚动的另一方法 拆分文字来做到文字滚动

    最近在看javascript详解这本书看到这个例子

    文字滚动,拆分文字来做到文字滚动。

    代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>专题</title>
    <style type="text/css"> 
    body{color:#333;font:12px/20px arial; background:#FFF;}
    body,div,form,img,p,h1,h2,dl,dt,dd,ul,li{padding:0;margin:0;}
    ul,li{list-style:none;}
    em{font-style:normal;}
    img{display:block;border:0}
    a{color:#333;text-decoration:none}
    a:hover,td a:hover{color:#f60;text-decoration:underline}
    </style>
    
    <script>
    var message = "学习javascript将让你的网页更精彩";
    message += " 你准备好,学习javascript了吗?";
    var space = "...";
    var position = 0;
    function scroller(){
      var newtext = message.substring(position,message.length)+space+message.substring(0,position);
        var con = document.getElementById("tabledata");
        con.firstChild.nodeValue = newtext;
        position++;
        if(position>message.length){position=0}
        var timer = window.setTimeout(scroller,200);
        con.onmouseover = function(){
         clearInterval(timer);
        }
        con.onmouseout = function(){
         timer = window.setTimeout(scroller,200);
        }
        
    }
    
    window.onload = function(){
    scroller();
    }
    </script>
    </head>
    <body>
    
    <div id="tabledata">message goes here</div>
    
    </body>
    </html>
    我的微博 http://weibo.com/u/1650528354
    博客地址 http://www.cnblogs.com/jingangel/
    本博的代码都是博主边学习边写的,代码都是自己敲的,如果要复制请加上出处,谢谢!
  • 相关阅读:
    Oracle SQL性能优化
    spring aop简单日志实例
    一个简单的Spring AOP例子
    jQuery的三种$()
    Mac 上的 outlook 一直让输入密码
    idea 中设置成公司规范的代码格式
    Java 中的锁——Lock接口
    TimeUnit枚举类
    Thread.join()的使用
    java线程的等待、通知机制【读书笔记】
  • 原文地址:https://www.cnblogs.com/jingangel/p/2798018.html
Copyright © 2011-2022 走看看