움직이는 텍스트(Marquee)_경험교류-CSS 튜토리얼-php.cn

Marquee 태그는 사용 가능한 탐색 영역 내에서 텍스트를 스크롤하는 데 사용됩니다. 이 태그는 IE3 및 이후 버전의 브라우저에만 적용됩니다.
형식:
MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…" "
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
GN: 버튼을 누르는 데 사용됩니다. 스크롤 텍스트를 지정된 값으로 정렬합니다. ALIGN에 설정할 수 있는 값은 LEFT, CENTER, RIGHT, TOP, BOTTOM입니다. 이 속성은 필수가 아닙니다.
예:
이 스크롤 텍스트는 위쪽 정렬로 설정됩니다. 브라우저가 설정된 방법에 따라 텍스트를 처리하도록 합니다. 메서드가 SLIDE로 설정된 경우 텍스트가 문서 위로 이동하고 여백에 유지됩니다. ALTERNATE로 설정하면 텍스트가 좌우로 이동합니다. SCROLL로 설정하면 페이지에서 텍스트가 반복적으로 스크롤됩니다. 이 속성은 필수가 아닙니다. 설정할 수 있는 값은 SILIDE, ALTERNATE, SCROLL입니다.
예:
텍스트가 한 쪽에서 다른 쪽으로 이동합니다 배경색은 RGB, 16진수 값 형식 또는 색상 이름으로 설정할 수 있습니다.
예:
16진수 값은 스크롤 텍스트의 배경색을 빨간색으로 설정합니다
　RGB를 사용하여 설정합니다. 스크롤되는 텍스트의 배경색을 빨간색으로
　 DIRECTION: 설정할 수 있는 값은 LEFT, RIGHT입니다. 이 속성은 필수가 아닙니다.
예:
🎜>　
HEIGHT: 롤링 자막의 높이를 설정하는 데 사용됩니다. 높이는 픽셀 단위 또는 표시되는 페이지의 백분율로 표시할 수 있습니다. 이 속성은 필수가 아닙니다.
예:
높이는 12픽셀입니다.
이 속성은 필수가 아닙니다.
예:
너비는 200픽셀입니다.
이 속성은 필수가 아닙니다.
예:
, 빈 공간은 픽셀로 표현됩니다. 이 속성은 필수가 아닙니다.
예:
. LOOP 값이 "INFINITE" 또는 "-1"이면 텍스트가 무한정 스크롤됩니다. 이 속성은 필수가 아닙니다.
예:

　
　SCROLLAMOUNT: 각 연속 스크롤 텍스트 뒤의 간격을 설정하는 데 사용되며 간격은 픽셀로 표시됩니다. 이 속성은 필수가 아닙니다.
예:
간격 시간(밀리초). 이 속성은 필수가 아닙니다.
예:
마우스가 영역 밖으로 이동할 때 계속 스크롤하도록 설정하는 데 사용됩니다
ONMOUSEOVER=this.stop(): 마우스가 해당 영역으로 이동할 때 스크롤을 중지하도록 설정하는 데 사용됩니다
자바스크립트는 연속 스크롤을 구현합니다

</div>
<div id="demo2"></div>
</div>

[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 기본 포럼 메시지 스크롤

[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

코드 복사 코드는 다음과 같습니다.

var marqueeContent=new Array();
marqueeContent[0]='刷新列表';
<% 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%>]='"><%=rs("realName")%>';
<% 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="max-width:90%" alt="움직이는 텍스트(Marquee)_경험교류" ></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="max-width:90%" alt="움직이는 텍스트(Marquee)_경험교류" ></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="max-width:90%" alt="움직이는 텍스트(Marquee)_경험교류" ></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" alt="움직이는 텍스트(Marquee)_경험교류" > Windy2000</a>
 
      也给自己做个广告~~~~~~~~~~ 
    </div> 
     
  </div> 
</div> 
</td></tr></table>

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

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>
 
    <a href="#" target="_blank">163.com</a>
 
    <a href="#" target="_blank">21cn.com</a>
 
    <a href="#" target="_blank">Happy new year</a> 
     
  </td></tr></table> 
</div> 
</td></tr></table>방향1:
<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=''">

방향2:
<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 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]