会移动的文字(Marquee)

答案：Marquee标记用于在可用浏览区域中滚动文本。这个标记只适用于IE3以后的版的浏览器。　 
　　　　格式：　 
　　　　<MARQUEE　ALIGN="…"　 
　　　　BEHAVIOR="…"　 
　　　　BGCOLOR="…"　 
　　　　DIRECTION="…"　 
　　　　HEIGHT="…"　 
　　　　WIDTH="…"　 
　　　　HSPACE="…"　 
　　　　VSPACE="…"　 
　　　　LOOP="…"　 
　　　　SCROLLAMOUNT="…"　 
　　　　SCROLLDELAY="…"　 
        ONMOUSEOUT=this.start()  
        ONMOUSEOVER=this.stop() 
　　　　>…　 
　　　　</MARQUEE>　 
　　　 
　　　　属性：　 
　　　　ALIGN：用于按设定的值对齐滚动的文本。ALIGN可以设定的值有：LEFT，CENTER，RIGHT，TOP，BOTTOM。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>　 
　　　 
　　　 
　　　　BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE，那么文本就移动到文档上，并停留在页边距上。如果设定为ALTERNATE，则文本从一边移动到另一边。如果设定为SCROLL，文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有：SILIDE，ALTERNATE，SCROLL。　 
　　　　例：　 
　　　　<MARQUEE　BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE>　 
　　　 
　　　 
　　　　BGCOLOR：用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。　 
　　　　例：　 
　　　　<MARQUEE　BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE>　 
　　　　<MARQUEE　BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE>　 
　　　　<MARQUEE　BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE>　 
　　　　　　 
　　　　DIRECTION：用于设定文本滚动的方向，可以设定的值有：LEFT，RIGHT。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　DIRECTION="LEFT">文字向左边滚动</MARQUEE>　 
　　　　<MARQUEE　DIRECTION="RIGHT">文字向右边滚动</MARQUEE>　 
　　　 
           HEIGHT：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　HEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE>　 
　　　　<MARQUEE　HEIGHT="12">滚动字幕的高度是12像素</MARQUEE>　 
　　　　　　 
　　　　WIDTH：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　WIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE>　 
　　　　<MARQUEE　WIDTH="200">滚动字幕的宽度是200像素</MARQUEE>　 
　　　　　　 
　　　　HSPACE：用于设定滚动字幕左右的空白空间，空白空间用像素表示。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　HSPACE="15">滚动字幕左右空白空间为15个像素</MARQUEE>　 
　　　　　 
　　　　VSPACE：用于设定滚动字幕上下的空白空间，空白空间用像素表示。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　VSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE>　 
　　　　　 
　　　　LOOP：用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时，则文字会无限制地滚动。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　LOOP="-1">文字滚动无数次</MARQUEE>　 
　　　　<MARQUEE　LOOP="5">文字滚动5次</MARQUEE>　 
　　　 
　　　　SCROLLAMOUNT：用于设定每个连续滚动文本后面的间隔，该间隔用像素表示。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　SCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE>　 
　　　　　　 
　　　　SCROLLDELAY：用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。此属性不是必须使用的。　 
　　　　例：　 
　　　　<MARQUEE　SCROLLDELAY="5">此文本两次滚动之间的间隔时间为5毫秒</MARQUEE> 

        ONMOUSEOUT=this.start() ：用来设置鼠标移出该区域时继续滚动 
        ONMOUSEOVER=this.stop()：用来设置鼠标移入该区域时停止滚动 
javascript实现连续滚动
<DIV id=demo style="overflow:hidden;height :200px;width :95px;background-color:white;color:#ffffff; 
border-width :1px 1px 1px 1px;border-style :dotted dotted dotted dotted;border-color :black black black black;" align=center> 
            <DIV id=demo1>  
              <!-- 定义图片 --> 
              <IMG src=/upload/20121014/logorcitqrkoib1.gif>  
              <IMG src=/upload/20121014/toplogoxi25ijj2t0l.gif>  
              <IMG src=/upload/20121014/logolu5lhdre1ez.gif> 
              <IMG src=/upload/20121014/LinkMeng_Logoau22e5x3rln.gif>  
              <IMG src=/upload/20121014/mylogocgpolwmplu1.gif>  
              <IMG src=http://www.it365cn.com/images/logo_1.gif>  
              <IMG src=http://www.it365cn.com/images/logo/lemongtree.gif>  
              <IMG src=http://www.it365cn.com/images/logo/flashempire.gif>  
            </DIV> 
            <DIV id=demo2></DIV> 
</DIV> 

<SCRIPT> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
demo.scrollTop-=demo1.offsetHeight 
else{ 
demo.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function(){clearInterval(MyMar)} 
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} 
</SCRIPT>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

经典论坛的消息滚动
<script> 
var marqueeContent=new Array();   //定义一个数组，用来存放显示内容 
marqueeContent[0]='刷新最新列表'; 
marqueeContent[1]='站点最新更新六十条'; 
marqueeContent[2]='羽毛效果制作教程'; 
marqueeContent[3]='MySQL＆ASP'; 
marqueeContent[4]='初步了解CSS3'; 
marqueeContent[5]='<font color=red>Fireworks</font> MX 2004执行面版操作'; 
marqueeContent[6]='<font color=red>Fireworks</font> MX 2004等高渐变填充'; 
marqueeContent[7]='瓶子里的花'; 
marqueeContent[8]='<font color=red>Fireworks</font> MX 实现选项卡式效果'; 
marqueeContent[9]='情侣：黑白的爱情空气'; 
marqueeContent[10]='制作 MAC 风格的苹果标志'; 
marqueeContent[11]='蛋壳制作及破壳而出的人物合成'; 

var marqueeInterval=new Array();  //定义一些常用而且要经常用到的变量 
var marqueeId=0; 
var marqueeDelay=4000; 
var marqueeHeight=20; //滚动高度 

//接下来的是定义一些要使用到的函数 
Array.prototype.random=function() { 
 var a=this; 
 var l=a.length; 
 for(var i=0;i<l;i++) { 
  var r=Math.floor(Math.random()*(l-i)); 
  a=a.slice(0,r).concat(a.slice(r+1)).concat(a[r]); 
  } 
 return a; 
 } 
function initMarquee() { 
 marqueeContent=marqueeContent.random(); 
 var str=''; 
 for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?'　　':'')+marqueeContent[i]; 
 document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); 
 marqueeId+=2; 
 if(marqueeContent.length>3)marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
 } 
function reinitMarquee() { 
 js_scroll_content.src='scroll_content2.js'; 
 marqueeContent=marqueeContent.random(); 
 var str=''; 
 for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?'　　':'')+marqueeContent[i]; 
 marqueeBox.childNodes[(marqueeBox.childNodes.length==1?0:1)].innerHTML=str; 
 marqueeId=2; 
 } 
function startMarquee() { 
 var str=''; 
 for(var i=0;(i<3)&&(marqueeId+i<marqueeContent.length);i++) { 
  str+=(i>0?'　　':'')+marqueeContent[marqueeId+i]; 
  } 
 marqueeId+=3; 
 if(marqueeId>marqueeContent.length)marqueeId=0; 

 if(marqueeBox.childNodes.length==1) { 
  var nextLine=document.createElement('DIV'); 
  nextLine.innerHTML=str; 
  marqueeBox.appendChild(nextLine); 
  } 
 else { 
  marqueeBox.childNodes[0].innerHTML=str; 
  marqueeBox.appendChild(marqueeBox.childNodes[0]); 
  marqueeBox.scrollTop=0; 
  } 
 clearInterval(marqueeInterval[1]); 
 marqueeInterval[1]=setInterval("scrollMarquee()",20); 
 } 
function scrollMarquee() { 
 marqueeBox.scrollTop++; 
 if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){ 
  clearInterval(marqueeInterval[1]); 
  } 
 } 
initMarquee(); 
</script>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<style type="text/css"> 
a {text-decoration: none;} 
</style> 
<script> 
var marqueeContent=new Array();   //滚动新闻 
marqueeContent[0]='<font color="#0000CC">14:25 </font>小泉称若自民党在议会选举中失败
'; 
marqueeContent[1]='<font color="#0000CC">14:25 </font>布什发表广播讲话
'; 
marqueeContent[2]='<font color="#0000CC">14:25 </font>易做图武装炸毁印控克什米尔铁路导致列车出轨
'; 
marqueeContent[3]='<font color="#0000CC">14:25 </font>布雷默：即使抓住了萨达姆也难以结束抵抗行动
'; 
var marqueeInterval=new Array();  //定义一些常用而且要经常用到的变量 
var marqueeId=0; 
var marqueeDelay=2000; 
var marqueeHeight=18; 
//接下来的是定义一些要使用到的函数 
function initMarquee() { 
    var str=marqueeContent[0]; 
    document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); 
    marqueeId++; 
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
    } 
function startMarquee() { 
    var str=marqueeContent[marqueeId]; 
        marqueeId++; 
    if(marqueeId>=marqueeContent.length) marqueeId=0; 
    if(marqueeBox.childNodes.length==1) { 
        var nextLine=document.createElement('DIV'); 
        nextLine.innerHTML=str; 
        marqueeBox.appendChild(nextLine); 
        } 
    else { 
        marqueeBox.childNodes[0].innerHTML=str; 
        marqueeBox.appendChild(marqueeBox.childNodes[0]); 
        marqueeBox.scrollTop=0; 
        } 
    clearInterval(marqueeInterval[1]); 
    marqueeInterval[1]=setInterval("scrollMarquee()",20); 
    } 
function scrollMarquee() { 
    marqueeBox.scrollTop++; 
    if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){ 
        clearInterval(marqueeInterval[1]); 
        } 
    } 
initMarquee(); 
</script>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

复制代码 代码如下:

<!-- #include file="conn.asp" --> 
<!-- #include file="online_users.asp" --> 
var marqueeContent=new Array(); 
marqueeContent[0]='<A href=><%    Dim rs,sql 
    CALL online_users 
    sql = "SELECT O.userName,U.realName FROM TBL_ONLINE O left join TBL_USER U on O.userName=U.userName ORDER BY O.loginTime DESC" 
    Set rs = conn.execute(sql) 
    If NOT (rs.eof AND rs.bof) Then 
        count=1 
        do while not rs.eof 
%> 
marqueeContent[<%=count%>]='<A href=><%            rs.movenext 
            count=count+1 
        loop 
    End If 
    rs.close 
    set rs=nothing 
    conn.close 
    set conn=nothing 
%>

<script language="JavaScript" defer> 
//code by windy_sk <windy_sk@126.com> 20040127 
var obj_marquee = document.getElementById("marquee"); 
var marquee_spd = 4000; 
var step_c = 0; 

function marquee_init() { 
    var obj_unit = obj_marquee.firstChild; 
    var n = Math.ceil(parseInt(obj_marquee.style.height) / obj_unit.offsetHeight); 
    for(var i=0; i<n; i++) obj_marquee.appendChild(obj_unit.cloneNode(true)); 
    return; 
} 

function marquee_show() { 
    var marquee_high = parseInt(obj_marquee.style.height); 
    var step = marquee_high/10; 
    if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) { 
        obj_marquee.scrollTop = 0; 
        marquee_show(); 
        return; 
    } 
    obj_marquee.scrollTop += step; 
    if(step_c++ < 9) setTimeout("marquee_show()", 50); 
    return; 
} 

marquee_init(); 
setInterval("step_c=0;setTimeout('marquee_show()',50)", marquee_spd); 

</script> 

<table style="border:1px black solid;"><tr><td> 
<div id="marquee" style="overflow:hidden;height:60px;width:210px;border:0px;padding:0px;"> 
  <div style="border:0px;padding:0px"> 
    <!-- Marquee Body Head --> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <img src="/upload/20121014/206ncjalsovuhj.gif" border="0" style="width:208px"> 
      这个是广告~~~~~~~~~ 
    </div> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <img src="/upload/20121014/208X333yhw3iwcue4.gif" border="0" style="width:208px"> 
      这个也是广告~~~~~~~~~~~~~~~~ 
    </div> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <img src="/upload/20121014/blueidearf1fj2r0mem.gif" border="0" style="width:208px"> 
      这个怎么还是广告？？？？？？ 
    </div> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <img src="" border="0"> Windy2000
 
      也给自己做个广告~~~~~~~~~~ 
    </div> 
    <!-- Marquee Body Bottom --> 
  </div> 
</div> 
</td></tr></table>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


<script language="JavaScript" defer> 
//qswh's original and modifid by windy_sk <windy_sk@126.com> 20040120 

function reportError(msg,url,line) { 
    var str = "You have found an error as below: \n\n"; 
    str += "Err: " + msg + " on line: " + line; 
    alert(str); 
    return true; 
} 

window.onerror = reportError;     

var obj_marquee = document.getElementById("marquee"); 
var repeat = null; 
var marquee_spd = 50; 

function marquee_init() { 
    var obj_unit = obj_marquee.firstChild; 
    var marquee_high = parseInt(obj_marquee.style.height); 
    var marquee_wide = parseInt(obj_marquee.style.width); 
    var unit_high = obj_unit.offsetHeight; 
    var unit_wide = obj_unit.offsetWidth; 
    var m = 0, n = 0, i = 0; 
    var tmp = null; 
     
    m = Math.ceil(marquee_wide / unit_wide); 
    n = Math.ceil(marquee_high / unit_high); 

    obj_unit.style.width = marquee_wide * (m+1); 
    obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width; 
     
    for(i=0; i<m; i++) { 
        tmp = obj_unit.rows[0].insertCell(-1); 
        tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML; 
        tmp.style.width = marquee_wide; 
        tmp = null; 
    } 

    for(i=0; i<n; i++) { 
        obj_marquee.appendChild(obj_unit.cloneNode(true)); 
    } 

    return; 
} 

function marquee_show(direction) { 
    switch(direction) { 
        case "up": 
            if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) { 
                obj_marquee.scrollTop -= obj_marquee.firstChild.offsetHeight; 
            } else { 
                obj_marquee.scrollTop++; 
            } 
            break; 
        case "down": 
            if(obj_marquee.scrollTop <= 0) { 
                obj_marquee.scrollTop += obj_marquee.firstChild.offsetHeight; 
            } else { 
                obj_marquee.scrollTop--; 
            } 
            break; 
        case "left": 
            if(obj_marquee.scrollLeft >= obj_marquee.firstChild.rows[0].cells[0].offsetWidth) { 
                obj_marquee.scrollLeft -= obj_marquee.firstChild.rows[0].cells[0].offsetWidth; 
            } else { 
                obj_marquee.scrollLeft++; 
            } 
            break; 
        case "right": 
            if(obj_marquee.scrollLeft <= 0) { 
                obj_marquee.scrollLeft += obj_marquee.firstChild.rows[0].cells[0].offsetWidth; 
            } else { 
                obj_marquee.scrollLeft--; 
            } 
            break; 
        default: 
            break; 
    } 
    return; 
} 

function marquee_doit() { 
    var direction = ""; 
    direction = obj_marquee.getAttribute("direction"); 
    if(direction != null) marquee_show(direction); 
    direction = obj_marquee.getAttribute("direction2"); 
    if(direction != null) marquee_show(direction); 
    return; 
} 

marquee_init(); 
repeat = setInterval("marquee_doit()",marquee_spd); 

marquee.onmouseover = function() {clearInterval(repeat);} 
marquee.onmouseout = function() {repeat=setInterval("marquee_doit()",marquee_spd);} 
</script> 

<table style="border:1px black solid;"><tr><td> 
<div id="marquee" direction="up" style="overflow:hidden;height:200px;width:250px"> 
  <table style="border:0px;padding:0px;"><tr><td> 
    <!-- Marquee Body Head --> 
    经典论坛
 
    163.com
 
    21cn.com
 
    Happy new year 
    <!-- Marquee Body Bottom --> 
  </td></tr></table> 
</div> 
</td></tr></table> 

Direction1:  
<input type="button" value="↑" onclick="obj_marquee.direction='up'">  
<input type="button" value="↓" onclick="obj_marquee.direction='down'">  
<input type="button" value="←" onclick="obj_marquee.direction='left'">  
<input type="button" value="→" onclick="obj_marquee.direction='right'">  
<input type="button" value=" X " onclick="obj_marquee.direction=''"> 
 

Direction2:  
<input type="button" value="↑" onclick="obj_marquee.direction2='up'">  
<input type="button" value="↓" onclick="obj_marquee.direction2='down'">  
<input type="button" value="←" onclick="obj_marquee.direction2='left'">  
<input type="button" value="→" onclick="obj_marquee.direction2='right'">  
<input type="button" value=" X " onclick="obj_marquee.direction2=''"> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上一个：动态更改网页HTML元素(对象)内容
下一个：网站首页head区代码规范