javascript基础实例(跑马灯、文字上下移动、marquee导航条)__javascript入门教程

当前位置：首页 > 脚本编程 > javascript > javascript入门教程 > 正文

javascript基础实例(跑马灯、文字上下移动、marquee导航条)_: 发布时间：2019-11-11编辑：脚本学堂

本文介绍了javascript的一些基础实例，包括跑马灯效果、文字上下移动效果、以及marquee实现滚动导航条效果等，有需要的朋友参考学习下。

1，文字的颜色不断的改变

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>文字的颜色不断的改变-www.jb200.com</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    
   <script language="javascript">
    var kinds;
   function textColor(){
     kinds=textColor.arguments.length; //arguments.length可以获取对象的参数个数
      for(var i=0;i<kinds;i++)
      {
          this[i] =textColor.arguments[i] ;
      }
   }
   tmp=new textColor(
       "#ffff00",
       "#f4f4f4",
       "#fff000" ,
       "#ff0000",
       "#f00000"
   );
   document.writeln('<span id="test">fuchuanbi test hfut university</span>'+"<br>");
   var pos=0;
   function changeColor()
   {
      if(pos < kinds)
      {
        pos++;
       }else{
        pos= 0;
}
document.getElementById("test").style.color=tmp[pos];
setTimeout("changeColor()",300);
   }
   </script>
<body>
   <input type="button" onclick="changeColor()" value="change()">
</body>
</html>

2，字体大小写变换

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

<html>  

  <head>  

    <title>字体大小写变换-www.jb200.com</title>  

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

    <meta http-equiv="description" content="this is my page">  

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  

     </head>  

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  

   <script language="javascript">  

    var  message="change from small to big and big to small";  

    var  textsize=28;  

    var  x=0 ;  

    document.write('<span id="wps"></span><br>');  

    function upwords(){  

      if(x < textsize){  

          x++ ;  

      setTimeout("upwords()",100);  

      }else{  

      setTimeout("downwords()",100);    

      }  

      wps.innerHTML="<center>"+message+x+"</center>" ;  

      wps.style.fontSize=x+'px';  

    }  

    function downwords(){  

      if(x> 0){  

        x--;  

        setTimeout("downwords()",100);  

      }else{  

         setTimeout("upwords()",100);  

      }  

     wps.innerHTML="<center>"+message+x+"</center>" ;  

     wps.style.fontSize=x+'px';  

    }  

   </script>  

  <body OnLoad="upwords()">  

  </body>  

</html>

3，点击出现菜单栏

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

<html>  

  <head>  

    <title>index.html</title>      

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

    <meta http-equiv="description" content="this is my page">  

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  

     </head>  

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  

    <style type="text/css">  

    .box{  

      background:#996633 ;  

      font: 9px;  

      position:absolute;  

      border:1px solid #f4f4f4;  

    }  

    </style>  

   <script language="javascript">  

    <strong>document.onclick=showMouseMove;//绑定点击事件</strong>  

    function showMouseMove(){  

   <strong> newX=window.event.x;  

    newY=window.event.y; //获取到当前鼠标的位置</strong>  

     if(document.getElementById("test").style.display=="")  

     {  

        document.getElementById("test").style.display="none" ;  

     }else{  

        document.getElementById("test").style.display=""  ;  

        }  

    <strong>   document.getElementById("test").style.pixelLeft=newX-50;  

       document.getElementById("test").style.pixelTop=newY-50;</strong>      

     }   

   </script>  

  <body >  

  <table id="test" class="box" style="display :none " height="101" width="80">  

    <tr>fuChuanBi</tr>  

    <tr>YangxuRui</tr>    

  </table>  

  </body>  

</html>

4，跑马灯

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

<html>  

  <head>  

    <title>跑马灯--www.jb200.com</title>      

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

    <meta http-equiv="description" content="this is my page">  

    <meta http-equiv="content-type" content="text/html; charset=utf-8">  

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  

   <script language="javascript">  

    var id,pause=0,position=0;  

    function banner(){  

       var i,k;  

       var m1="       welcome to myhome for learning JavaScript";  

       var m2="       Object to develop";  

       var msg=m1+m2 ;  

       var speed=10;  

       document.iform.banner.value=msg.substring(position,position+160);  

        document.iform.pos.value=position;  

       if(position++==msg.length){  

       position=0;  

       }  

       id=setTimeout("banner()",2000/speed);  

    }  

   </script>  

  </head>  

  <body onLoad="banner()">  

  <form method="post" name="iform">  

  <input type="text" size="48" maxlength="256" name="banner">  

  <input type="text" size="48" maxlength="256" name="pos">  

  </form>  

    This is my HTML page. <br>  

  </body>  

</html>

5，使用marquee 设置滚动导航条

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>index.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    
    <style type="text/css">
    .box{
      background:#996633 ;
      font: 9px;
      position:absolute;
      border:1px solid #f4f4f4;
    }
    </style>
   <script language="javascript">
      var link= new Array("fuchuanbi","YxiaoRui","hfut_xiaobi");
      var addr=new Array("www.baidu.com","www.163.com","www.unversity.edu.cn");
      document.write("<marquee scrollalinuxjishu/9952.html target=_blank class=infotextkey>mount=1 direction=up width=150 height=60>");
      for(var i=0;i<link.length;i++)
      {
        document.write("<a href="+addr[i]+">"+link[i]+"</a><br>");
      }
      document.write("</marquee>");
   </script>
<body >
<table id="test" class="box" style="display :none " height="101" width="80">
    <tr>fuChuanBi</tr>
    <tr>YangxuRui</tr>
</table>
</body>
</html>

6，文字的上下移动

复制代码代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

<html>  

  <head>  

    <title>index.html</title>  

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

    <meta http-equiv="description" content="this is my page">  

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  

     </head>  

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  

   <script language="javascript">  

   var pos= -50;  

   function upwords(){  

      if(pos >50){  

         setTimeout("downwords()",20);  

      }else{  

         pos++;  

         setTimeout("upwords()",20);  

      }  

  <strong>    document.getElementById("t1").style.top=pos;</strong>  

   }  

   function downwords(){  

     if(pos < -50){  

        setTimeout("upwords()",20);  

     }else{  

       pos --;  

       setTimeout("downwords()",20);  

     }  

    <strong>document.getElementById("t1").style.top=pos;</strong>  

   }  

   setTimeout("upwords()",20);  

   </script>  

  <body >  

   <span id="t1" style="position:absolute ;top: -50; font-size:9px;">it is mine</span>  

  </body>  

</html>

上一篇：JavaScript内置对象之DOM学习
下一篇：javascript基础教程之对象编程

与 javascript基础实例(跑马灯、文字上下移动、marquee导航条)_ 有关的文章

本文标题：javascript基础实例(跑马灯、文字上下移动、marquee导航条)_
本页链接：http://www.jb200.com/article/js/19849.html

浏览排行

栏目分类

热点文章

javascript基础实例(跑马灯、文字上下移动、marquee导航条)_