?? 3.22 文字滑動.htm
字號:
<html>
<head>
<script type="text/javascript">
function $(id) {
return document.getElementById(id); //獲取控件的ID
}
function marquee(time, oDiv, oLtd, oRtd) //制作一個marquee類
{
/*
time 值越大速度越慢
oDiv最外層div
oLtd左邊的td
oRtd右邊的td
*/
var timer, width = oLtd.offsetWidth;
function move() {
if (oDiv.scrollLeft >= width) //當滾動條移動到最后時，重新開始
oDiv.scrollLeft = 0;
else
oDiv.scrollLeft ++; //一直滾動
}
oRtd.innerHTML = oLtd.innerHTML; //左側內容轉移動到右側
oDiv.style.overflow = "hidden"; //隱藏最外層div
oRtd.style.width = oLtd.offsetWidth; //右側td的寬度
oDiv.onmouseover = function () { //鼠標移動過來的事件
window.clearInterval(timer); //清空定時器-停止滾動
};
oDiv.onmouseout = function () {
timer = window.setInterval(move, time); //鼠標移走便開始滾動
};
timer = window.setInterval(move, time); //開始滾動
};
window.onload = function () {
new marquee(25, $("myDiv"), $("myTd1"), $("myTd2"));
}
</script>
</head>
<body>
<div id="myDiv" style="border:#CCCCCC 1px dashed; width:300px;"><!--設置顯示的寬度-->
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="myTd1">
<table width="342" cellpadding="0" cellspacing="0"><!--注意這里的寬度必須設置，并且要設置為具體值-->
<tr align="center">
<td>左邊</td>
<td>右邊</td>
<td>左邊</td>
<td>右邊</td>
</tr>
</table>
</td>
<td id="myTd2"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -