经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › [HTML代码]会移动的文字(Marquee)

查看: 82820|回复: 24

[HTML代码]会移动的文字(Marquee) [复制链接]

cnbruce　楼主

布鲁斯狼

荣誉管理

帖子: 8064
体力: 21540
威望: 153
居住地: 江苏省扬州市

发表于 2003-10-18 11:51:00 |显示全部楼层

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实现连续滚动

<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>

提示：您可以先修改部分代码再运行

............................................................................................................
经典论坛的消息滚动

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>

提示：您可以先修改部分代码再运行

提示：您可以先修改部分代码再运行

从数据表中调用数据:

var marqueeContent=new Array();
marqueeContent[0]='<A href="#" onclick="reinitMarquee()">刷新列表</A>';
<% 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="postMsg_write.asp?postTo=<%=rs("userName")%>"><%=rs("realName")%></a>';
<% rs.movenext
count=count+1
loop
End If
rs.close
set rs=nothing
conn.close
set conn=nothing
%>

复制代码

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">
    
    <div style="height:60px;width:210px;font-size:12px">
      <a href="http://www.kdt.cn/kdt/introduce.php"><img src="http://www.blueidea.com/gg/kdt/206.gif" border="0" style="width:208px"></a>
      这个是广告~~~~~~~~~
    </div>
    <div style="height:60px;width:210px;font-size:12px">
      <a href="http://www.idc2008.com/index5.htm"><img src="http://www.blueidea.com/gg/idc2008/208X33.gif" border="0" style="width:208px"></a>
      这个也是广告~~~~~~~~~~~~~~~~
    </div>
    <div style="height:60px;width:210px;font-size:12px">
      <a href="http://www.qycity.com/"><img src="http://www.blueidea.com/gg/qycity/blueidea.gif" border="0" style="width:208px"></a>
      这个怎么还是广告？？？？？？
    </div>
    <div style="height:60px;width:210px;font-size:12px">
      <a href="http://bbs.blueidea.com/profile-username-windy2000.html"><img src="" border="0"> Windy2000</a><br>
      也给自己做个广告~~~~~~~~~~
    </div>
    
  </div>
</div>
</td></tr></table>

提示：您可以先修改部分代码再运行

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_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>
    
    <a href="#" target="_blank">经典论坛</a><br>
    <a href="#" target="_blank">163.com</a><br>
    <a href="#" target="_blank">21cn.com</a><br>
    <a href="#" target="_blank">Happy new year</a>
    
  </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=''"> <br>

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=''">

提示：您可以先修改部分代码再运行

		自动登录	找回密码
密码			注册

[HTML代码]会移动的文字(Marquee) [复制链接]

我是新来的

浏览过的帖子

浏览过的版块