使用JavaScript实现连续滚动字幕效果的方法


Posted in Javascript onJuly 07, 2015

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

这样就完成了,感觉做起来也不难吧。

Javascript 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
理解JavaScript的变量的入门教程
Jul 07 #Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 #Javascript
javascript实现控制div颜色
Jul 07 #Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 #Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 #Javascript
javascript中数组方法汇总
Jul 07 #Javascript
jQuery原型属性和原型方法详解
Jul 07 #Javascript
You might like
php类
2006/11/27 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JS中的作用域链
2017/03/01 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
跟老齐学Python之Python文档
2014/10/10 Python
Python合并字符串的3种方法
2015/05/21 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
深入理解Python变量与常量
2016/06/02 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python何时应该使用Lambda函数
2019/07/02 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
个人简历自我评价
2014/02/02 职场文书
个人租房协议书
2014/04/09 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
党员个人公开承诺书
2014/08/29 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
我的1919观后感
2015/06/03 职场文书
远程教育学习心得体会
2016/01/23 职场文书
python flask框架快速入门
2021/05/14 Python
python区块链实现简版工作量证明
2022/05/25 Python