• ----:)欢迎访问源码网(:----
    • 首页
    • 博客
    • 学院
    • 下载
    • 论坛
    • 影视
    • 发布源码
    • RSS
    • ITPig
    • 笑话网
    • 百家姓
    • 繁體中文

源码网 - 中国第一源码门户
选择镜像:网通镜像 - 电信主站
  • 首 页
  • 新闻动态
  • 网站运营
  • 网页制作
  • WEB开发
  • 编程开发
  • 图像媒体
  • 操作系统
  • 数据库
  • 服务器
热门搜索 优化 SEO 故事 cms IIS7 MySQL 个人 AdSense 主题推广 | 文章搜索: 高级搜索
会员登录/控制面版您的位置: 学院首页 >> 网页制作 >> Javascript >> 详细内容
 

推荐文章

 
 

热点文章

  • 网页设计配色应用实例剖析——红色系(1)
  • 网页设计配色应用实例剖析——橙色系(1)
  • JavaScript实现图片幻灯片效果的源代码
  • 网页设计配色应用实例剖析——黄色系(1)
  • JavaScript中常用正则表达式
  • 网页设计配色应用实例剖析——绿色系
  • 自然界的色彩搭配与界面设计(1)
  • JavaScript自定义模式对话框
  • 浮动菜单是如何作出来的mouse事件
  • 斜体样式的导航条
  • 三组网站经常使用的流行色彩元素
  • 策划正确的配色方案(推荐)(1)
 
 

相关文章

  • Ajax简介
  • javascript 实现无刷新联动菜单select的方法
  • javascript脚本轻松实现局部刷新
  • javascript汉字转拼音 功能块,方法很笨但很实用
  • 用JavaScript实现利用FLASH嵌入声音(七)
  • 用JavaScript实现利用FLASH嵌入声音(六)
  • 用JavaScript实现利用FLASH嵌入声音(五)
  • Javascript制作闪烁的边框
  • Javascript制作浮动的工具条
  • Javascript设计漫天雪花
  • 利用Javascript创建对象
  • Javascript实例教程(15)
 
 

百度搜索

 
 

用Javascript制作连续滚动的字幕

  • 阅览次数:
  • 文章来源: CP整理
  • 原文作者:
  • 整理日期: 2008-05-10
  • 发表评论
  • 字体大小:
  • 小
  • 中
  • 大

我们一般都用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>

上一篇:关于on error resume next的滥用
下一篇:sql2000下 分页存储过程
  • 网友评论:
  • 查看所有评论
  • 我要发表评论
您的网名:
留言主题:
你要发表的内容:

 

关于本站 | 广告联系 | 版权声明 | 网站地图 | 发布软件 | 帮助中心 | 源码论坛

Copyright © 2005-2007 CodePub.Com  程序支持:木翼  滇ICP备05005971号