• 文字滚动的另一方法 拆分文字来做到文字滚动


    最近在看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/
    本博的代码都是博主边学习边写的,代码都是自己敲的,如果要复制请加上出处,谢谢!
  • 相关阅读:
    第五次博客作业
    第三次博客作业
    个人简介
    实验三
    实验二
    实验一
    《构建之法》心得体会
    第三次博客园作业
    软件测试实验二
    个人简历
  • 原文地址:https://www.cnblogs.com/jingangel/p/2798018.html
Copyright © 2020-2023  润新知