| 网站首页 | 新人学院 | 两性健康 | 创业学院 | 小游戏 | QQ 专区 | 性知识 | 图片 | 下载 | 推介 | 交友 | 健康无优 | 
□  您现在的位置: 新人无忧 >> 新人学院 >> 建站技术 >> 网络编程 >> JSP学习区 >> 正文
 
 

教你用Javascript制作连续滚动的字幕

来源:Internet 点击数: 更新时间:2007-8-31 3:06:29   
我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。

  下面小阳为你介绍这是如何实现的。

  为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚
动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。

<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="position:absolute;z-index:1;visibility:hidden"></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>
  
这样就完成了,感觉做起来也不难吧。

相关文章: 教你识别原版的Windows XP SP2
教你如何在cmd里结束进程
你用ADSL吗?来了解一下ADSL真正速度
再谈常见网络攻击 工程师教你轻松防制
教你打造百毒不侵的Windows系统
教你隐藏任务栏图标的两种简易方法
 □ 学院热点更新 
·让我们远离病毒八项基本原则
·教你彻底防杀木马病毒(强列
·十大流氓软件完全卸载全攻略
·让ADSL永不断线--操作实战演
·有关网络的基础知识(入门手
·上网一千问(新人上网必看)
·[注意]电脑故障的排除原则、
·电脑故障排除的一般分析方法

Windows 2003服务器安

QQ图标全攻略(图)

【新手上网必看】什么

实用技巧 彻底而又简单
设为首页 - 友情连接 - 问题反馈 - 免责声明 - 广告服务 - 收藏本站 - 网站地图
www.jy361.com[新人无忧] 版权所有 Copyright©2004-2007
资源来源网络,版权规作者所有。新人学院为您提供学习的平台,谢谢对我们的支持。