教你用Javascript制作连续滚动的字幕
<P>我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的，每滚完一幕，就会出现一次空白。而下面介绍中的滚动则是连续的，毫不间断。</P><P>为了滚动能够“连续”，我们需要将字幕的内容复制多遍，直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉，用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时，理论上不能再往下滚动了，于是我们立刻调整滚动条，将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵，说的就是这么简单，那做起来如何呢？我们看看是如何逐步实现的。</P>
<P>＜div id=marquees ＜!-- 这些是字幕的内容，你可以任意定义 -- ＜a href=#链接一＜a
＜br ＜a href=#链接二＜a
＜br ＜a href=#链接三＜a
＜br ＜a href=#链接四＜a
＜br ＜!-- 字幕内容结束 --
＜div
＜!-- 以下是java-script代码 --
＜script language=java-script
＜!--
marqueesHeight=200; 内容区高度
stopscroll=false; 这个变量控制是否停止滚动
with(marquees){
noWrap=true; 这句表内容区不自动换行
style.width=0; 于是我们可以将它的宽度设为0，因为它会被撑大
style.height=marqueesHeight;
style.overflowY=hidden; 滚动条不可见
onmouseover=new Function(stopscroll=true); 鼠标经过，停止滚动
onmouseout=new Function(stopscroll=false); 鼠标离开，开始滚动
}
这时候，内容区的高度是无法读取了。下面输出一个不可见的层templayer，稍后将内容复制到里面：
document.write(＜div id=templayer
style=positionabsolute;z-index1;visibilityhidden＜div);
function init(){ 初始化滚动内容
多次复制原内容到templayer，直到templayer的高度大于内容区高度：
while(templayer.offsetHeight＜marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} 把templayer的内容的“两倍”复制回原内容区：
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
设置连续超时，调用scrollUp()函数驱动滚动条：
setInterval(scrollUp(),10);
}
document.body.onload=init;
preTop=0; 这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ 滚动条的驱动函数
if(stopscroll==true) return; 如果变量stopscroll为真，则停止滚动
preTop=marquees.scrollTop; 记录滚动前的滚动条位置
marquees.scrollTop+=1; 滚动条向下移动一个像素
如果滚动条不动了，则向上滚动到和当前画面一样的位置
当然不仅如此，同样还要向下滚动一个像素(+1)：
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
--
＜script
这样就完成了，感觉做起来也不难吧。</P>
<P>可以看一下<a href="http://www.fei76.com" target="_blank" >www.fei76.com</A>的首页</P> <P>不错!</P><P>支持!</P><P>收益拉!</P> 不过里面好象欠缺语句哦! 不过里面好象欠缺语句哦! 是吗？那你对照一下吧，<a href="http://www.fei76.com" target="_blank" >www.fei76.com</A> 首页就是这个 <script language="javascript">
<!--
marqueesHeight=200;
stopscroll=false;
with(marquees){
noWrap=true;
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",25);
}
document.body.onload=init;
preTop=0;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script> <P> <div id="marquees"></P><P>如果这样用的话!需要关联!</P> <DIV class=quote><B>以下是引用<I>发条橙子</I>在2005-3-17 18:29:16的发言：</B>
<P><div id="marquees"></P>
<P>如果这样用的话!需要关联!</P></DIV>
<P>
<P>把需要滚动的放到这里边就OK了</P>
<P>然后JS调用执行</P> <div id="marquees">
<TABLE cellSpacing=0 cellPadding=0 width=178 align=center border=0>
<TBODY>
<TR>
<TD height=24 bgColor=#d1e8fe class="black"> - <FONT
color=red>关于今晚Snake讲座的公告</FONT></TD>
</TR>
<TR>
<TD height=1 class="black"></TD>
</TR>
<TR>
<TD height=24 bgColor=#f4faff class="black"> - 大空间，高速，稳定，安全</TD>
</TR>
<TR>
<TD height=1 class="black"></TD>
</TR>
<TR>
<TD height=24 bgColor=#d1e8fe class="black"> - 欢迎注册我社团会员</TD>
</TR>
<TR>
<TD height=1 class="black"></TD>
</TR>
<TR>
<TD height=24 bgColor=#f4faff class="black"> - 论坛诚招版主正在进行中</TD>
</TR>
<TR>
<TD height=24 bgColor=#d1e8fe class="black"> - <font color="red">周六我社团要举行召新活动</font></TD>
</TR>
<TR>
<TD height=1 class="black"></TD>
</TR>
<TR>
<TD height=24 bgColor=#f4faff class="black"> - 免费会员诸侯制度</TD>
</TR>
<TR>
<TD height=1 class="black"></TD>
</TR>
<TR>
<TD height=24 bgColor=#d1e8fe class="black"> - 注册论坛会员，<span class="style1">免费送QQ</span></TD>
</TR>
<TR>
<TD height=1 class="black"></TD>
</TR>
<TR>
<TD height=24 bgColor=#f4faff class="black"> - 上周社团部举办社团联谊</TD>
</TR>
<TR>
<TD bgColor=#aad3fc height=1></TD>
</TR>
</TBODY>
</TABLE>
</div>
<script language="javascript">
<!--
marqueesHeight=200;
stopscroll=false;
with(marquees){
noWrap=true;
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",25);
}
document.body.onload=init;
preTop=0;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script> 请把以上代码复制到记事本里，然后把扩展名改为htm,用浏览器打开就可以看到效果了 <P>继续补一些经验：<BR>防止滚动跑出外边，通常作两个一样的表格<BR>例如<BR><table><BR><tr><BR> <td></P>
<P><div><BR><FONT color=#c43c3c> <table><BR> <tr><BR> <td>你好，这是最里边表格！</td><BR> </tr><BR> </table></FONT></P>
<P><FONT color=#c43c3c></div></FONT><BR> </td><BR></tr><BR></table></P>
好贴，顶一下楼主！
好贴，顶一下楼主！http://www.domain.cn/club/images/default/sigline.gif
古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。---魔兽剑圣异界纵横
小游戏 极品家丁 龙蛇演义 恶魔法则 飞升之后 异界枪神 凡人修仙传 魔兽领主 超级农民 成人小游戏 极品公子
页:
[1]