Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript基础实例(跑马灯、文字上下移动、marquee导航条)_

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

发布时间:2015-07-21   编辑:www.jquerycn.cn
本文介绍了javascript的一些基础实例,包括跑马灯效果、文字上下移动效果、以及marquee实现滚动导航条效果等,有需要的朋友参考学习下。

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

复制代码 代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>文字的颜色不断的改变-www.jquerycn.cn</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  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.jquerycn.cn</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.jquerycn.cn</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> 
    <!--<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"> 
      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 scrollamount=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> 

您可能感兴趣的文章:
JQuery 插件制作实践 xMarquee插件V1.0
javascript基础实例(跑马灯、文字上下移动、marquee导航条)_
h5的新增标签和废弃标签
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
JavaScript 实例
天天酷跑刀马旦怎么样刷分 天天酷跑刀马旦坐骑好不好
jquery实现marquee效果(文字或者图片的水平垂直滚动)
javascript 树形导航菜单的经典示例
html5实现文字轮滚的示例代码
jQuery 内容滑动插件 Basic jQuery Slider

关键词: marquee  导航条  跑马灯   
[关闭]