zoukankan      html  css  js  c++  java
  • Change the marquee directions on button click left and right

    example 1:

    <html>
     <body>
     <script language="JavaScript">
         function function1(){
             document.all.myMarquee.direction = "up";
         }
         function function2(){
             document.all.myMarquee.direction = "left";
         }
         function function3(){
             document.all.myMarquee.direction = "right";
         }
         function function4(){
             document.all.myMarquee.direction = "down";
         }
     </script>
     <marquee id="myMarquee" bgcolor="cyan">MARQUEE TEXT HERE</marquee>
     <button onclick="function1();">Up</button>
     <button onclick="function2();">Left</button>
     <button onclick="function3();">Right</button>
     <button onclick="function4();">Down</button>
     </body>

    example 2

    <head>
      <script type="text/javascript">
        function changeMarquee(dir) {
        
    
        //sets the direction atribute for the marquee tag
          document.getElementById('myMarquee').setAttribute('direction', dir);
        
    
        //changes the direction after 2 seconds (2000 = 2 seconds)
          if (dir == 'left') {
            setTimeout("document.getElementById('myMarquee').setAttribute('direction', 'right')", 2000);
          }
          else {
            setTimeout("document.getElementById('myMarquee').setAttribute('direction', 'left')", 2000);
          }
        }
      </script>
    </head>
    <body>
      <div>
        <marquee id="myMarquee" direction="right">This is some text</marquee>
      </div>
      <input type="button" onclick="changeMarquee('left')" id="leftBtn" value="Marquee Left" />
      <input type="button" onclick="changeMarquee('right')" id="righBbtn" value="Marquee Right" />
    </body>

    example3

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>.::M A R U Q U E E::. </title>
    </head>
    <body>
    <script language="JavaScript">
        function goRightfor2sec()
        {
            document.getElementById('myMarquee').direction = "right";
        }
        function crawlLeft(){
            setTimeout(goRightfor2sec,2000);
            document.getElementById('myMarquee').direction = "left";
        }
        function crawlRight(){
            setTimeout(goLeftfor2sec,2000);
            document.getElementById('myMarquee').direction = "right";
        }
        function goLeftfor2sec(){
            document.getElementById('myMarquee').direction = "left";
        }
    </script>
    <button onclick="crawlLeft();">Left</button>
    <marquee id="myMarquee"  bgcolor="cyan">MARQUEE TEXT HERE</marquee>
    <button onclick="crawlRight();">Right</button>
    </body>
    </html>
  • 相关阅读:
    一次心惊肉跳的服务器误删文件的恢复过程
    ThreadPoolExecutor使用详解
    Springboot学习笔记(一)-线程池的简化及使用
    springboot之异步调用@Async
    CentOS 7添加开机启动服务/脚本
    三分钟在任何电脑上使用 chrome os
    Spring Cloud Alibaba基础教程:Sentinel Dashboard中修改规则同步到Nacos
    Nacos部署中的一些常见问题汇总
    Spring Cloud Alibaba基础教程:Sentinel Dashboard中修改规则同步到Apollo
    Spring Cloud Alibaba 新版本发布:众多期待内容整合打包加入!
  • 原文地址:https://www.cnblogs.com/visense/p/3216196.html
Copyright © 2011-2022 走看看