设为首页
加入收藏
繁體中文
首 页客家风情客家影音山歌在线客家商城聊天室留言墙测字算命下载中心IT 技术客家论坛
您当前的位置:客家网 | 天南地北客家人 -> IT 技术-> JSP -> 正文 退出登录 用户管理
栏目导航
· ASP · JSP
· 网络安全 · NET专区
· XML专区 · PHP专区
热门文章
· ASP+JavaScript的完整的..
· [图文] 防范非法用户的侵..
· ASP从数据库中获取文件..
· 网络管理中的常用命令
· [图文] 千年虫二世诞生业..
· [图文] FSO组件操作实例..
· 网络常见木马的手工清除..
· 利用ASP远程获取内容
· [图文] 简单购物车教程
· 一个ASP(VBScript)简..
· asp常用数据库连接方法..
· 网络常见木马的手工清除..
相关文章
· 教你几种分布式攻击的防..
· 教你如何打造黑客也读不..
· 教你彻底防杀木马病毒
教你用Javascript制作连续滚动的字幕
作者:风未起时  来源:中国站长学院  发布时间:2007-3-14 15:12:12  发布人:Admin

减小字体 增大字体

我们一般都用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>
  
这样就完成了,感觉做起来也不难吧。


[] [返回上一页] [打 印] [收 藏]
上一篇文章:JSP由浅入深(1)
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
关于本站 - 网站合作 - 免责声明 - 友情连接 - 网站地图 - 客家论坛
本站部份内容来自网络 如无意中侵犯了您的权利 请及时与我们联系 我们会尽快处理
Copyright © 2006-2008 天南地北客家人
Email:yddlts@126.com  QQ:153161602
站长:大浪淘沙    QQ群:33754730
粤ICP备07019796号