连续滚动的制作

我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的，每滚完一幕，就会出现一次空白。而下面介绍中的滚动则是连续的，毫不间断。* X$ F: C* P' Z# W
+ ^1 |/ _& {7 X/ ^9 p: b
　　下面小阳为你介绍这是如何实现的。
& a; Z- T  t8 D4 c2 \/ I1 w+ F5 s5 C1 ?+ U; C1 w
　　为了滚动能够“连续”，我们需要将字幕的内容复制多遍，直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉，用代码控制滚动条向下移动（这时内容将向上移动）。当滚动条滚动到最下方时，理论上不能再往下滚动了，于是我们立刻调整滚动条，将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵，说的就是这么简单，那做起来如何呢？我们看看是如何逐步实现的。
& Q% s! |- b6 q' {: Vdiv id="marquees"% O0 f0 b2 i6 `8 P
!-- 这些是字幕的内容，你可以任意定义 --& y; W- U, R. C, h/ N
a href="#"链接一/abr
  J6 x9 ~* [$ Gbr- v* K* p4 m* f/ ~( E
a href="#"链接二/abr' |7 m& q4 U' Z  B+ D' P0 m4 y
br
( |2 j8 T, z* ?8 p0 T8 R. D( Ha href="#"链接三/abr. A3 K! f6 n/ U- W8 D
br! f# {1 j' f* n; C! R
a href="#"链接四/abr
1 [+ v) j& |: m  v$ [$ Jbr
) d  m  K' p9 K" F6 g!-- 字幕内容结束 --7 n+ ~# y$ g% i* i$ v" x; f8 @, H7 m% Q
/div   0 R% [. O1 M  z) p
" z- O! V% U0 |" |* ^1 m8 K! w
!-- 以下是java-script代码 --
% j8 c2 f/ H! ^* P/ p* _$ k& n9 Ascript language="java-script"* g- l1 W( ^7 O5 ^: ]; y. P
!--
* Q, o! y3 d# Y- F0 wmarqueesHeight=200; //内容区高度  
6 c+ F$ W6 k- y0 d2 F4 _4 ?; ?( j+ {. w) s" h4 W; e: G
stopscroll=false; //这个变量控制是否停止滚动
9 @$ \9 G: f3 G$ V  A5 jwith(marquees){, I! ~! ?" t$ s1 M
noWrap=true; //这句表内容区不自动换行3 b, z: f6 y, d5 E9 \! A& u. A' _% a
style.width=0; //于是我们可以将它的宽度设为0，因为它会被撑大/ u' y& w& Y( _. W. R/ o3 P$ \# }' T
style.height=marqueesHeight;
4 H! `; s; r/ nstyle.overflowY="hidden"; //滚动条不可见! [" |6 [7 j! J5 ?2 l
0 L& ~$ O" S) g1 l3 @+ {9 q
onmouseover=new Function("stopscroll=true"); //鼠标经过，停止滚动1 _& {$ s2 d9 V! U: i7 a
onmouseout=new Function("stopscroll=false"); //鼠标离开，开始滚动9 \8 m1 u- E% u- O! W" j/ \5 A3 T
}
! {9 A7 v3 E: @' u/ ^$ D//这时候，内容区的高度是无法读取了。下面输出一个不可见的层"templayer"，稍后将内容复制到里面：
# s. `( M4 l7 U# @2 T7 U4 Vdocument.write('div id="templayer" style="position:absolute;z-index:1;visibility:hidden"/div');  8 `0 v7 g( p! b0 X: x' _, h3 H4 T
+ m3 w. I3 U/ P2 F! o4 x. A
function init(){ //初始化滚动内容" f/ z) X+ C. ]% |' a6 R, ^
//多次复制原内容到"templayer"，直到"templayer"的高度大于内容区高度：3 `3 c/ B4 g: S. b' F
while(templayer.offsetHeightmarqueesHeight){; Y$ a0 M$ G+ O) J0 i% K  N# f# M
templayer.innerHTML =marquees.innerHTML;- U3 }* ]9 v1 b/ i- g. U
}
' J# y4 j" W+ p( G7 r/ w8 a//把"templayer"的内容的“两倍”复制回原内容区：
5 H  l+ L7 T. j2 i6 Gmarquees.innerHTML=templayer.innerHTML templayer.innerHTML;8 ?: [8 k+ r1 U& R  e) b8 A
//设置连续超时，调用"scrollUp()"函数驱动滚动条：
( z! J, N% N, isetInterval("scrollUp()",10);) e" `+ N, A4 x! b. B( \
}! K. ?/ \- G4 R! s& ~
document.body.onload=init;  
: H6 {8 I' q6 X8 B9 x9 U5 P+ q1 f5 ]. c" \
preTop=0; //这个变量用于判断滚动条是否已经到了尽头  , B, k) ~$ s# d8 t% k! a

' Y( b8 A9 }! |/ }# Gfunction scrollUp(){ //滚动条的驱动函数! I4 N3 R) q$ _6 `
if(stopscroll==true) return; //如果变量"stopscroll"为真，则停止滚动 & D* h/ \6 Z, n
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
* ^! ]/ [% U( G: }( D) Ymarquees.scrollTop =1; //滚动条向下移动一个像素
) _$ Z+ R3 l. Z; z, K0 G//如果滚动条不动了，则向上滚动到和当前画面一样的位置
4 m( ?8 z5 a! F* K& C: b) J//当然不仅如此，同样还要向下滚动一个像素( 1)：
( G  j* A5 e- }5 W/ P: Sif(preTop==marquees.scrollTop){
- H: {7 c7 w- r: tmarquees.scrollTop=templayer.offsetHeight-marqueesHeight 1;
$ c* o1 w) y* e9 H) ^; m}7 p- w9 J1 ]: F
}1 \3 w3 A, O$ Y4 l
--! ]$ n/ L" T$ X  ?& _; {; E
/script  # H& c: u4 w# G: f* d2 ?! m' ~

: B0 y7 T. C/ v　　这样就完成了，感觉做起来也不难吧。好了，向上滚动的就是这样，向其它方向滚动的就不用我介绍了吧？