會移動的文字(Marquee)_經驗交流-css教學-PHP中文網

首頁

web前端

css教學

會移動的文字(Marquee)_經驗交流

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:10 PM

Marquee標記用於在可用瀏覽區域中滾動文字。這個標記只適用於IE3以後的版的瀏覽器。 　
　　　　格式：　
　　　　　　　　BEHAVIOR="…"　
　　　　BGCOLOR="…"　
　　　　DIRECTION="…"　
　　　　HEIGHT="…"
　　　　WIDTH="…"　
　　　　HSPACE="…"　
　　　　VSPACE="　
　　　　VSPACE="　　　　　　SCROLLDELAY="…"　
        ONMOUSEOUT=this.start()
        ONMOUSEOVER=this.stop()
　　　〜　　〜　　〜　　〜　　〜　〜　〜　〜　〜　〜　〜　〜、]>　　
　　　　屬性：　
　　　　ALIGN：用於依設定的值對齊滾動的文字。 ALIGN可以設定的值有：LEFT，CENTER，RIGHT，TOP，BOTTOM。此屬性不是必須使用的。
　　　　例：　
　　　　這段滾動文字設定為上對齊　
　　頁面上一旦出現文字時就讓瀏覽器按照設定的方法來處理文字。如果設定的方法是SLIDE，那麼文字就會移動到文件上，並停留在頁邊距上。如果設定為ALTERNATE，則文字從一邊移動到另一邊。如果設定為SCROLL，文字將在頁面上重複滾動。本屬性不是必須使用的。可以設定的值有：SILIDE，ALTERNATE，SCROLL。　
　　　　例：　
　　　　文字從一邊移動到另一邊　『　BGCOLOR：用來設定字幕的背景顏色。背景顏色可用RGB、16進位值的格式或顏色名稱來設定。
　　　　例：　
　　　　用顏色名稱設定滾動文字背景顏色為紅色　　　　製值用紅色　　　　下位用值滾動文字背景顏色為紅色　
　　　　用RGB設定滾動文字背景顏色為紅色　
　　　　　　
　　　　DIRECTION ：用於設定文字滾動的方向，可以設定的值有：LEFT，RIGHT。此屬性不是必須使用的。
　　　　例：　
　　　　文字向左邊滾動　　MAR　　＀＀〜＀＀　〜　　〜＀　〜＀　〜＀〜　〜＀　〜＀〜＀〜＀　〜＀〜.　
           HEIGHT ：用於設定滾動字幕的高度，高度可用像素或視覺頁面的百分比來表示。此屬性不是必須使用的。
　　　　例：　
　　　　捲動字幕的高度是可視頁的10%　
　　　　　2 　
　　　　　　
　　　　WIDTH：用於設定字幕的寬度，寬度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。
　　　　例：　
　　　　滾動字幕的寬度是可視頁的90%　　
　　　　　　
　　　　HSPACE：用於設定滾動字幕左右的空白空間，空白空間以像素表示。此屬性不是必須使用的。
　　　　例：　
　　　　滾動字幕左右空白空間為15個像素　　　　　例：　
　　　　滾動字幕上下的空白空間為2個像素　　　　　例：　
　　　　文字滾動無數次　 SCROLLAMOUNT：用於設定每個連續滾動文字後面的間隔，該間隔以像素表示。此屬性不是必須使用的。
　　　　例：　
　　　　此文字後面的間隔為10個像素　　　　　　　　　、　　　、　　　、、、、、、、、]　　　　　、、、、、、、、〣　、] AY：用於設定兩次滾動操作之間的間隔時間，該時間以毫秒為單位。此屬性不是必須使用的。
　　　　例：　
　　　　此文字兩次滾動之間的間隔時間為5毫秒
        ONMOUSEOVER=this.stop()：用來設定滑鼠移入該區域時停止滾動
javascript實現連續滾動

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

經典論壇的訊息滾動

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

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行

]

複製程式碼

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="/static/imghw/default1.png" data-src="http://www.blueidea.com/gg/kdt/206.gif" class="lazy" 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="/static/imghw/default1.png" data-src="http://www.blueidea.com/gg/idc2008/208X33.gif" class="lazy" 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="/static/imghw/default1.png" data-src="http://www.blueidea.com/gg/qycity/blueidea.gif" class="lazy" 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>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需刷新才能執行]

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn