實施範例12

12.提供方法讓用戶可以在靜態視窗或範圍下顯示移動、捲動或自動更新的文字

有些網頁因為沒有足夠顯示空間而使用捲動式文本。能夠快速閱讀的用戶可以在細小的視窗內閱讀捲動的內容;但是對閱讀緩慢,或使用輔助技術的用戶來說,則會引起困難。這個技巧因而提供了方法讓用戶可以暫停移動的內容,並把整段文字靜態地顯示在另一視窗,或在同一頁的其他位置上,然後用戶可以根據自己的速度來閱讀。

當整段捲動的內容未能完整地在屏幕上顯示時,例如長篇的聊天對話,這個技巧則不適用。

範例:

把捲動文字擴展在適當位置上

在網頁的一個小面積位置上,有一大段文字在裡面捲動,另外有一個按鈕,讓用戶暫停文字捲動,並把整段內容顯示出來。

css組件:
範例代碼:

#scrollContainer {
visibility: visible;
overflow: hidden;
top: 50px; left: 10px;
background-color: darkblue;
}
.scrolling {
position: absolute;
width: 200px;
height: 50px;
}
.notscrolling {
width: 500px;
margin:10px;
}
#scrollingText {
top: 0px;
color: white;
}
.scrolling #scrollingText {
position: absolute;
}
</a>   

HTML 和腳本內容:
範例代碼:

<script type="text/javascript">

      var tid;
function init() {
var st = document.getElementById('scrollingText');
st.style.top = '0px';
initScrolling();
}
function initScrolling () {
tid = setInterval('scrollText()', 300);
}
function scrollText () {
var st = document.getElementById('scrollingText');
if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
st.style.top = (parseInt(st.style.top) - 5) + 'px';
} else {
var sc = document.getElementById('scrollContainer');
st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
}
}
function toggle() {
var scr = document.getElementById('scrollContainer');
if (scr.className == 'scrolling') {
scr.className = 'notscrolling';
clearInterval(tid);
document.getElementById('scrollButton').value="Shrink";
} else {
scr.className = 'scrolling';
initScrolling();
document.getElementById('scrollButton').value="Expand";
}
}
<input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
<div id="scrollContainer" class="scrolling">
<div id="scrollingText" class="on">
.... Text to be scrolled ...
</div>
</div>
...