zoukankan      html  css  js  c++  java
  • marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动:

    <marquee width="220px;" scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()" >
              <p style="letter-spacing:2px; 1px;">
                欢迎您登录拜博医疗口腔集团内部网
            </p>
    </marquee>    

    2.js+div实现文字无缝平滑移动:

    <p id="scrollobj" style="white-space:nowrap;overflow:hidden;400px;margin: auto;" onmouseover="stop()" onmouseout="start()"><span style="padding-left: 210px;">欢迎您登录拜博医疗口腔集团内部网</span></p>
    
    <script>
    function scroll(obj) {
          var tmp = (obj.scrollLeft)++;
          //当滚动条到达右边顶端时
          if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
          //当滚动条滚动了初始内容的宽度时滚动条回到最左端
          if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
         }
        var a =    setInterval("scroll(document.getElementById('scrollobj'))",20);
        function stop(){
            clearInterval(a);
        }
        function start(){
            a=setInterval("scroll(document.getElementById('scrollobj'))",30);
        }
    </script>
  • 相关阅读:
    LeetCode 43 字符串相乘
    HDU 1031 Design T-Shirt
    HDU 1728 逃离迷宫
    HDU 1285 确定比赛名次
    HDU 1116 Plays on words
    HDU 1195 Open the lock
    HDU 1072 Nightmare
    HDU 1272 小希的迷宫
    HDU 1273 漫步森林
    HDU 1269 迷宫城堡
  • 原文地址:https://www.cnblogs.com/super-chao/p/6118603.html
Copyright © 2011-2022 走看看